vue中前端如何實現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)

更新時間：2023年07月26日 11:56:50 作者：MakerZz

這篇文章主要給大家介紹了vue中前端如何實現(xiàn)pdf預(yù)覽功能的相關(guān)資料,文中包含vue-pdf插件用法,在前端開發(fā)中,很多時候我們需要進行pdf文件的預(yù)覽操作,需要的朋友可以參考下

場景：

前端需要根據(jù)后端返回的線上pdf的地址，實現(xiàn)pdf的預(yù)覽功能。

情況一：

后端返回的pdf地址，粘貼到瀏覽器的url框中，是可以在瀏覽器中直接進行預(yù)覽的。

方法（1）可以直接使用window.open（'獲取到的pdf地址'）重新打開一個瀏覽器頁簽，通過瀏覽器頁簽直接實現(xiàn)預(yù)覽功能（預(yù)覽頁面的樣式，根據(jù)瀏覽器的不同，會略有差異）

eg：在Google-Chrome瀏覽器中的效果

方法（2）若不想重新打開瀏覽器頁簽，可以在當前頁面內(nèi)增加iframe標簽，對要預(yù)覽的pdf進行預(yù)覽。iframe標簽內(nèi)展示的預(yù)覽界面樣式，與上面的方法（1）中相同，是跟隨瀏覽器的。

<iframe
    :src="獲取到的pdf預(yù)覽地址"
>
</iframe>

情況二：

后端返回的pdf地址，粘貼到瀏覽器的url框中，無法在瀏覽器中直接進行預(yù)覽。（之前遇到的情況是該url在瀏覽器中輸入后，瀏覽器沒有顯示頁面，直接啟動了下載）

注意：這種情況下，上述的兩種方法都是無法預(yù)覽的，前端的俊男靚女們務(wù)必提前確認好返回的url的情況哦！

方法（3）使用插件vue-pdf進行預(yù)覽

步驟

1. 安裝依賴

npm install --save vue-pdf

2. 在需要的頁面，引入插件

import pdf from 'vue-pdf'

3. 使用

3.1 單頁pdf可以直接使用

<pdf>
    :src="獲取到的pdf地址"
</pdf>

3.2 多頁pdf通過循環(huán)實現(xiàn)

html標簽部分

<pdf
    v-for="item in pageTotal"
    :src="pdfUrl"
    :key="item"
    :page="item"
>
</pdf>

在mounted函數(shù)中需要調(diào)用下述方法獲取pdf的總頁數(shù)

// 獲取pdf總頁數(shù)
getTotal() {
    // 多頁pdf的src中不能直接使用后端獲取的pdf地址 否則會按頁數(shù)請求多次數(shù)據(jù)
    // 需要使用下述方法的返回值作為url
    this.pdfUrl = pdf.createLoadingTask('獲取到的pdf地址')
    // 獲取頁碼
    this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {})
}

此時頁面即可正常實現(xiàn)pdf預(yù)覽