vue中前端如何實現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)
場景：
前端需要根據(jù)后端返回的線上pdf的地址，實現(xiàn)pdf的預(yù)覽功能。
情況一：
后端返回的pdf地址，粘貼到瀏覽器的url框中，是可以在瀏覽器中直接進行預(yù)覽的。
方法（1）可以直接使用window.open（'獲取到的pdf地址'）重新打開一個瀏覽器頁簽，通過瀏覽器頁簽直接實現(xiàn)預(yù)覽功能（預(yù)覽頁面的樣式，根據(jù)瀏覽器的不同，會略有差異）
eg： 在Google-Chrome瀏覽器中的效果
方法（2）若不想重新打開瀏覽器頁簽，可以在當(dāng)前頁面內(nèi)增加iframe標(biāo)簽，對要預(yù)覽的pdf進行預(yù)覽。iframe標(biāo)簽內(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標(biāo)簽部分
<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ù)覽
總結(jié)
到此這篇關(guān)于vue中前端如何實現(xiàn)pdf預(yù)覽功能的文章就介紹到這了,更多相關(guān)vue前端實現(xiàn)pdf預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2025-05-05
文章介紹了uniapp微信小程序金額展示套餐的相關(guān)內(nèi)容,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-01-01
解決vue-cli項目開發(fā)運行時內(nèi)存暴漲卡死電腦問題
最近開發(fā)一個vue項目時遇到電腦卡死問題，突然間系統(tǒng)就非?？?，然后卡著卡著就死機了，鼠標(biāo)也動不了了，只能冷啟動。這篇文章主要介紹了vue-cli項目開發(fā)運行時內(nèi)存暴漲卡死電腦問題,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細介紹了vue車牌搜索組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
在Vue.js開發(fā)中,經(jīng)常會遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開發(fā)效率,我們可以封裝一個可配置的搜索列表組件,下面我們就來講講如何實現(xiàn)這樣一個組件吧2023-08-08
element?ui動態(tài)側(cè)邊菜單欄及頁面布局實現(xiàn)方法
后臺管理系統(tǒng)經(jīng)常會使用到一個左側(cè)菜單欄,右側(cè)Tab頁的頁面顯示結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于element?ui動態(tài)側(cè)邊菜單欄及頁面布局實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-09-09
Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用
這篇文章主要介紹了Element-ui自定義table表頭、修改列標(biāo)題樣式、添加tooltip、:render-header使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
node+vue前后端分離實現(xiàn)登錄時使用圖片驗證碼功能
這篇文章主要介紹了node+vue前后端分離實現(xiàn)登錄時使用圖片驗證碼,記錄前端使用驗證碼登錄的過程，后端用的是node.js，關(guān)鍵模塊是svg-captcha，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-11-11
Vue 中 filter 與 computed 的區(qū)別與用法解析
這篇文章主要介紹了Vue 中 filter 與 computed 的區(qū)別與用法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue-cli下的vuex的簡單Demo圖解(實現(xiàn)加1減1操作)
這篇文章主要介紹了vue-cli下的vuex的簡單Demo（實現(xiàn)加1減1操作）,本文圖文并茂給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-02-02