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