快捷導(dǎo)航

Vue3實(shí)現(xiàn)預(yù)覽PDF文件的多種方式(超簡(jiǎn)單)

更新時(shí)間：2025年03月11日 10:26:04 作者：暗武逢天

在Vue項(xiàng)目中實(shí)現(xiàn)PDF文件預(yù)覽是許多開(kāi)發(fā)者可能會(huì)遇到的需求,尤其是在開(kāi)發(fā)海外后臺(tái)管理系統(tǒng)時(shí),由于某些用戶(hù)上傳的文件格式為PDF,而Vue本身并不直接支持PDF文件的預(yù)覽功能,這就需要借助一些第三方的插件或者工具來(lái)完成,下面詳細(xì)地介紹幾種在Vue3中實(shí)現(xiàn)PDF文件預(yù)覽的方法

介紹

在前端vue中有時(shí)會(huì)遇到需要進(jìn)行預(yù)覽pdf的場(chǎng)景,前段時(shí)間我一位前端朋友就有遇到這個(gè)問(wèn)題,也和我進(jìn)行了一些探討

其中預(yù)覽pdf場(chǎng)景主要會(huì)有三種情況:

本地文件,pdf在線預(yù)覽路徑,pdf下載路徑三種,其中前面兩種還比較常見(jiàn),但是第三種的pdf下載路徑進(jìn)行預(yù)覽這種場(chǎng)景還是不是太多的,因?yàn)樗麄兒蠖私o返回的路徑就是一個(gè)下載路徑,路徑放到瀏覽器里面會(huì)直接進(jìn)行下載pdf

下面將會(huì)以vue3為例來(lái)進(jìn)行預(yù)覽pdf的演示

安裝環(huán)境

第三方包組件

npm install vue-pdf-embed@^1.1.6
 
npm install vue3-pdfjs@^0.1.6

預(yù)覽pdf

主要組件代碼如下

本地文件預(yù)覽

首先第一種情況,直接把pdf文件放入項(xiàng)目目錄中進(jìn)行預(yù)覽

啟動(dòng)查看效果

預(yù)覽成功

在線路徑預(yù)覽

比較常見(jiàn)的就是一個(gè)可以直接拿來(lái)預(yù)覽的路徑,比如下面的路徑:

http://static.shanhuxueyuan.com/test.pdf

書(shū)寫(xiě)預(yù)覽代碼

預(yù)覽成功

當(dāng)然也可以使用系統(tǒng)自帶的iframe進(jìn)行預(yù)覽

查看預(yù)覽效果

預(yù)覽樣式有些丑需要自己進(jìn)行書(shū)寫(xiě)樣式,當(dāng)然本地文件那種也可以使用iframe進(jìn)行預(yù)覽,可以自己嘗試下

下載文件路徑預(yù)覽

極少數(shù)情況下拿到的是一個(gè)直接下載的路徑,此時(shí)前端不想進(jìn)行下載想直接對(duì)該路徑進(jìn)行預(yù)覽,當(dāng)然前面的組件也完全可以兼容這種寫(xiě)法

首先后端準(zhǔn)備提供一個(gè)下載文件的接口路徑

 @GetMapping("/downloadPdf")
    public ResponseEntity<StreamingResponseBody> downloadPdf() {
        // 指定本地 PDF 文件的路徑
        String filePath = "C:\\var\\示例2.pdf";
        File file = new File(filePath);
 
        // 檢查文件是否存在
        if (!file.exists()) {
            return ResponseEntity.notFound().build();
        }
 
        // 設(shè)置響應(yīng)頭
        HttpHeaders headers = new HttpHeaders();
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=test.pdf");
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");
 
        // 返回 StreamingResponseBody
        StreamingResponseBody body = outputStream -> {
            try (FileInputStream fis = new FileInputStream(file)) {
                byte[] buffer = new byte[4096];
                int bytesRead;
                while ((bytesRead = fis.read(buffer)) != -1) {
                    outputStream.write(buffer, 0, bytesRead);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        };
 
        return ResponseEntity.ok()
                .headers(headers)
                .contentLength(file.length())
                .contentType(MediaType.APPLICATION_OCTET_STREAM)
                .body(body);
    }