vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線(xiàn)預(yù)覽的示例代碼
背景
之前的demo增加了圖片預(yù)覽,于是今天下午追完番劇就突然想到能不能把pdf在線(xiàn)預(yù)覽也做了,說(shuō)干就干,剛開(kāi)始查了很多教程,我發(fā)現(xiàn)很多人都在說(shuō)什么pdf.js這個(gè)庫(kù),這當(dāng)然沒(méi)什么問(wèn)題,pdf.js的確可以非常完美的實(shí)現(xiàn)pdf在線(xiàn)預(yù)覽的過(guò)程,但是感覺(jué)這樣直接進(jìn)去有點(diǎn)不太優(yōu)雅,于是找找看看有沒(méi)有什么現(xiàn)成的組件,發(fā)現(xiàn)有vue-pdf這個(gè)組件,雖然說(shuō)它沒(méi)有原生那樣強(qiáng)大,比如不支持pdf文字復(fù)制,打印會(huì)亂碼,但是我感覺(jué)已經(jīng)足以滿(mǎn)足我的需求了。本篇筆記循序漸進(jìn),從基礎(chǔ)的demo,到一個(gè)可用的程度,文末列出了大家在實(shí)際使用的過(guò)程中可能會(huì)遇到的問(wèn)題和解決方案。
安裝:
這個(gè)沒(méi)有啥背景知識(shí)可講,我們直接跳到安裝環(huán)節(jié),vue-pdf 和其他vue組件的安裝并無(wú)不同,打開(kāi)命令行,敲入:
npm install --save vue-pdf
注意路徑。別在桌面調(diào)出來(lái)個(gè)終端安裝了,這種直接打回去重學(xué)Vue。
vue-pdf 初體驗(yàn):
安裝完之后,使用vue-pdf非常簡(jiǎn)單,和其他的組件并沒(méi)有什么不同,上代碼:
首先我們需要引入這個(gè)組件:
<script> import pdf from 'vue-pdf' export default { components:{ pdf }, data(){ return { url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", } } </script>
然后在頁(yè)面使用vue-pdf,只需要添加標(biāo)簽:
<template> <div> <pdf ref="pdf" :src="url"> </pdf> </div> </template>
重啟你的項(xiàng)目,訪(fǎng)問(wèn)這個(gè)界面,你大概率會(huì)發(fā)現(xiàn)pdf已經(jīng)成功顯示在你的界面上了。這沒(méi)有任何問(wèn)題,但是,正當(dāng)你準(zhǔn)備拿起一根煙,點(diǎn)上,伴著舒適的《美麗的梭羅河》,欣賞你成功的杰作的時(shí)候,你會(huì)發(fā)現(xiàn),我擦,為啥只有一頁(yè),當(dāng)玻璃杯碰在一起,滿(mǎn)世界都是夢(mèng)破碎的聲音。
所以,這只是初體驗(yàn),如果你的pdf只有一頁(yè),這樣寫(xiě)當(dāng)然沒(méi)什么問(wèn)題,但是當(dāng)我們呢pdf 有很多頁(yè)的時(shí)候,你會(huì)發(fā)現(xiàn),這行不通了。所以,接下來(lái),我們來(lái)看看怎么讓它顯示多頁(yè)。
vue-pdf 漸入佳境:
其實(shí),想要顯示多頁(yè)也沒(méi)那么復(fù)雜,你每次就顯示一頁(yè),我,直接v-for 循環(huán),直接顯示完,簡(jiǎn)單粗暴。
頁(yè)面代碼:
<template> <div> <pdf v-for="i in numPages" :key="i" :src="url" :page="i"></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data(){ return{ url: '', numPages:1, } }, mounted: function() { this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf") }, methods: { getNumPages(url) { var loadingTask = pdf.createLoadingTask(url) loadingTask.then(pdf => { this.url = loadingTask this.numPages = pdf.numPages }).catch((err) => { console.error('pdf加載失敗') }) }, } } </script>
各個(gè)屬性:
- url :pdf 文件的路徑,可以是本地路徑,也可以是在線(xiàn)路徑。
- numPages : pdf 文件總頁(yè)數(shù)。
getNumPages 計(jì)算總頁(yè)數(shù),順便給url和numPages賦值。
唯一需要大家注意的是這句:
this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")
注意啊,這句不一定非要寫(xiě)到mounted里面,你想寫(xiě)哪就寫(xiě)哪,比如你前端請(qǐng)求后端,后端返回一個(gè)pdf 的url,在那里寫(xiě)就行,寫(xiě)在你需要的地方。
vue-pdf 輕車(chē)熟路:
很多人看到這,就這,就這?萬(wàn)一,我pdf有一千頁(yè),我瀏覽器還不得裂開(kāi),我追求的是那種在微醺的下午,一頁(yè)一頁(yè)的翻看的感覺(jué),你能給我嗎?
我不能,才怪,保證滿(mǎn)足你。
<template> <div> <div class="tools"> <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="prePage" class="mr10"> 上一頁(yè)</bk-button> <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="nextPage" class="mr10"> 下一頁(yè)</bk-button> <div class="page">{{pageNum}}/{{pageTotalNum}} </div> <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="clock" class="mr10"> 順時(shí)針</bk-button> <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="counterClock" class="mr10"> 逆時(shí)針</bk-button> </div> <pdf ref="pdf" :src="url" :page="pageNum" :rotate="pageRotate" @progress="loadedRatio = $event" @page-loaded="pageLoaded($event)" @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event"> </pdf> </div> </template>
接下來(lái),我們一一介紹這些都是個(gè)啥。
參數(shù)介紹:
- page: 當(dāng)前顯示的頁(yè)數(shù),比如第一頁(yè)page=1
- rotate : 旋轉(zhuǎn)角度,比如0就是不旋轉(zhuǎn),+90,-90 就是水平旋轉(zhuǎn)。
- progress :當(dāng)前頁(yè)面的加載進(jìn)度,范圍是0-1 ,等于1的時(shí)候代表當(dāng)前頁(yè)已經(jīng)完全加載完成了。
- page-loaded :頁(yè)面加載成功的回調(diào)函數(shù),不咋能用到。
- num-pages :總頁(yè)數(shù)
- error :加載錯(cuò)誤的回調(diào)
- link-clicked:?jiǎn)螜C(jī)pdf內(nèi)的鏈接會(huì)觸發(fā)。
其他:
- print 這個(gè)是打印函數(shù)。 注意:谷歌瀏覽器會(huì)出現(xiàn)亂碼,這個(gè)和字體有關(guān)系。
來(lái),js代碼走一個(gè):
<script> import pdf from 'vue-pdf' export default { name: 'Home', components: { pdf }, data() { return { url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", pageNum: 1, pageTotalNum: 1, pageRotate: 0, // 加載進(jìn)度 loadedRatio: 0, curPageNum: 0, } }, mounted: function() {}, methods: { // 上一頁(yè)函數(shù), prePage() { var page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一頁(yè)函數(shù) nextPage() { var page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, // 頁(yè)面順時(shí)針?lè)D(zhuǎn)90度。 clock() { this.pageRotate += 90 }, // 頁(yè)面逆時(shí)針?lè)D(zhuǎn)90度。 counterClock() { this.pageRotate -= 90 }, // 頁(yè)面加載回調(diào)函數(shù),其中e為當(dāng)前頁(yè)數(shù) pageLoaded(e) { this.curPageNum = e }, // 其他的一些回調(diào)函數(shù)。 pdfError(error) { console.error(error) }, } } </script>
其他騷操作:
// 打印全部 pdfPrintAll() { this.$refs.pdf.print() }, // 打印指定部分 pdfPrint() { this.$refs.pdf.print(100, [1, 2]) },
具體樣式什么的我就不貼出來(lái)了,這些都不是重點(diǎn),完全可以改成自己喜歡的。
成品展示:
其他問(wèn)題以及解決方案:
跨域問(wèn)題:
網(wǎng)上用pdf.js 很多都會(huì)遇到跨域問(wèn)題,這個(gè)我今天實(shí)際應(yīng)用到自己的項(xiàng)目里面了,由于我服務(wù)端設(shè)置了跨域,所以沒(méi)有出現(xiàn)跨域的問(wèn)題,如果出現(xiàn)跨域需要修改你后端的請(qǐng)求頭。
打印界面字符亂碼:
這個(gè)我倒是碰到了,谷歌瀏覽器打印的時(shí)候,預(yù)覽界面真的變成了 真·方塊字 ,全是方塊。這個(gè)問(wèn)題是因?yàn)槟鉷df中使用了自定義字體導(dǎo)致的,具體解決方案如下:
首先,找到這個(gè)文件:node_modules/vue-pdf/src/pdfjsWrapper.js
然后根據(jù)github上這個(gè)issue,其中紅色的是要?jiǎng)h掉的,綠色的是要加上去的,照著改就可以解決了。
根據(jù)我的實(shí)際測(cè)試,是可以解決打印亂碼的問(wèn)題的。
到此這篇關(guān)于vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線(xiàn)預(yù)覽的示例代碼的文章就介紹到這了,更多相關(guān)vue pdf在線(xiàn)預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue2.0如何借用vue-pdf實(shí)現(xiàn)在線(xiàn)預(yù)覽pdf文件
- VUE-PDF實(shí)現(xiàn)pdf在線(xiàn)預(yù)覽問(wèn)題
- vue3.0使用vue-pdf-embed在線(xiàn)預(yù)覽pdf 控制頁(yè)碼顯示范圍不生效問(wèn)題解決
- Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線(xiàn)預(yù)覽實(shí)戰(zhàn)
- vue-pdf實(shí)現(xiàn)文件在線(xiàn)預(yù)覽
- Vue-pdf實(shí)現(xiàn)在線(xiàn)預(yù)覽PDF文件
- vue-pdf實(shí)現(xiàn)pdf在線(xiàn)預(yù)覽并實(shí)現(xiàn)自定義預(yù)覽框高度
相關(guān)文章
vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12vue echarts實(shí)現(xiàn)綁定事件和解綁事件
這篇文章主要介紹了vue echarts實(shí)現(xiàn)綁定事件和解綁事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue3中echarts的tooltip組件不顯示問(wèn)題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue如何獲取new Date().getTime()時(shí)間戳
在Web開(kāi)發(fā)中,前端使用Vue.js獲取的是毫秒級(jí)時(shí)間戳,而PHP后端則是秒級(jí)時(shí)間戳,處理此類(lèi)問(wèn)題時(shí),需要將PHP的時(shí)間戳乘以1000轉(zhuǎn)換為毫秒級(jí),以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10vue鼠標(biāo)懸停事件監(jiān)聽(tīng)實(shí)現(xiàn)方法
頁(yè)面在鼠標(biāo)懸停(不動(dòng))n秒之后,頁(yè)面進(jìn)行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽(tīng)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09vue3項(xiàng)目中配置sass,vite報(bào)錯(cuò)Undefined mixin問(wèn)題
這篇文章主要介紹了vue3項(xiàng)目中配置sass,vite報(bào)錯(cuò)Undefined mixin問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02