vue中前端如何實(shí)現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)
場(chǎng)景：
前端需要根據(jù)后端返回的線上pdf的地址，實(shí)現(xiàn)pdf的預(yù)覽功能。
情況一：
后端返回的pdf地址，粘貼到瀏覽器的url框中，是可以在瀏覽器中直接進(jìn)行預(yù)覽的。
方法（1）可以直接使用window.open（'獲取到的pdf地址'）重新打開一個(gè)瀏覽器頁簽，通過瀏覽器頁簽直接實(shí)現(xiàn)預(yù)覽功能（預(yù)覽頁面的樣式，根據(jù)瀏覽器的不同，會(huì)略有差異）
eg： 在Google-Chrome瀏覽器中的效果
方法（2）若不想重新打開瀏覽器頁簽，可以在當(dāng)前頁面內(nèi)增加iframe標(biāo)簽，對(duì)要預(yù)覽的pdf進(jìn)行預(yù)覽。iframe標(biāo)簽內(nèi)展示的預(yù)覽界面樣式，與上面的方法（1）中相同，是跟隨瀏覽器的。
<iframe
:src="獲取到的pdf預(yù)覽地址"
>
</iframe>情況二：
后端返回的pdf地址，粘貼到瀏覽器的url框中，無法在瀏覽器中直接進(jìn)行預(yù)覽。（之前遇到的情況是該url在瀏覽器中輸入后，瀏覽器沒有顯示頁面，直接啟動(dòng)了下載）
注意：這種情況下，上述的兩種方法都是無法預(yù)覽的，前端的俊男靚女們務(wù)必提前確認(rèn)好返回的url的情況哦！
方法（3）使用插件vue-pdf進(jìn)行預(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)實(shí)現(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地址 否則會(huì)按頁數(shù)請(qǐng)求多次數(shù)據(jù)
// 需要使用下述方法的返回值作為url
this.pdfUrl = pdf.createLoadingTask('獲取到的pdf地址')
// 獲取頁碼
this.pdfUrl.promise.then(pdf => this.pageTotal = pdf.numPages).catch(error => {})
}此時(shí)頁面即可正常實(shí)現(xiàn)pdf預(yù)覽
總結(jié)
到此這篇關(guān)于vue中前端如何實(shí)現(xiàn)pdf預(yù)覽功能的文章就介紹到這了,更多相關(guān)vue前端實(shí)現(xiàn)pdf預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中實(shí)現(xiàn)代碼高亮與語法著色的方法介紹
在Vue的開發(fā)過程中，我們經(jīng)常需要展示代碼片段或者進(jìn)行代碼高亮與語法著色，Vue提供了多種方式來實(shí)現(xiàn)代碼高亮與語法著色，本文將為你詳細(xì)介紹這些方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue-cli腳手架安裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue使用H5的audio標(biāo)簽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了解決vue-router路由攔截造成死循環(huán)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在本篇文章里小編給大家分享了關(guān)于VUE前后端學(xué)習(xí)tab寫法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-08-08
vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue支持搜索與篩選的用戶列表實(shí)現(xiàn)流程介紹
這篇文章主要介紹了Vue支持搜索與篩選的用戶列表實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
vue和react的區(qū)別及優(yōu)缺點(diǎn)解讀
這篇文章主要介紹了vue和react的區(qū)別及優(yōu)缺點(diǎn)說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種方式
這篇文章主要為大家詳細(xì)介紹了使用Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01