Vue3實現(xiàn)預覽PDF文件的多種方式(超簡單)

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

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

介紹

在前端vue中有時會遇到需要進行預覽pdf的場景,前段時間我一位前端朋友就有遇到這個問題,也和我進行了一些探討

其中預覽pdf場景主要會有三種情況:

本地文件,pdf在線預覽路徑,pdf下載路徑三種,其中前面兩種還比較常見,但是第三種的pdf下載路徑進行預覽這種場景還是不是太多的,因為他們后端給返回的路徑就是一個下載路徑,路徑放到瀏覽器里面會直接進行下載pdf

下面將會以vue3為例來進行預覽pdf的演示

安裝環(huán)境

第三方包組件

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

預覽pdf

主要組件代碼如下

本地文件預覽

首先第一種情況,直接把pdf文件放入項目目錄中進行預覽

啟動查看效果

預覽成功

在線路徑預覽

比較常見的就是一個可以直接拿來預覽的路徑,比如下面的路徑:

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

書寫預覽代碼

預覽成功

當然也可以使用系統(tǒng)自帶的iframe進行預覽

查看預覽效果

預覽樣式有些丑需要自己進行書寫樣式,當然本地文件那種也可以使用iframe進行預覽,可以自己嘗試下

下載文件路徑預覽

極少數(shù)情況下拿到的是一個直接下載的路徑,此時前端不想進行下載想直接對該路徑進行預覽,當然前面的組件也完全可以兼容這種寫法

首先后端準備提供一個下載文件的接口路徑

 @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();
        }
 
        // 設置響應頭
        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);
    }