vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼
背景
之前的demo增加了圖片預(yù)覽,于是今天下午追完番劇就突然想到能不能把pdf在線預(yù)覽也做了,說干就干,剛開始查了很多教程,我發(fā)現(xiàn)很多人都在說什么pdf.js這個(gè)庫,這當(dāng)然沒什么問題,pdf.js的確可以非常完美的實(shí)現(xiàn)pdf在線預(yù)覽的過程,但是感覺這樣直接進(jìn)去有點(diǎn)不太優(yōu)雅,于是找找看看有沒有什么現(xiàn)成的組件,發(fā)現(xiàn)有vue-pdf這個(gè)組件,雖然說它沒有原生那樣強(qiáng)大,比如不支持pdf文字復(fù)制,打印會(huì)亂碼,但是我感覺已經(jīng)足以滿足我的需求了。本篇筆記循序漸進(jìn),從基礎(chǔ)的demo,到一個(gè)可用的程度,文末列出了大家在實(shí)際使用的過程中可能會(huì)遇到的問題和解決方案。
安裝:
這個(gè)沒有啥背景知識(shí)可講,我們直接跳到安裝環(huán)節(jié),vue-pdf 和其他vue組件的安裝并無不同,打開命令行,敲入:
npm install --save vue-pdf
注意路徑。別在桌面調(diào)出來個(gè)終端安裝了,這種直接打回去重學(xué)Vue。
vue-pdf 初體驗(yàn):
安裝完之后,使用vue-pdf非常簡單,和其他的組件并沒有什么不同,上代碼:
首先我們需要引入這個(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>
然后在頁面使用vue-pdf,只需要添加標(biāo)簽:
<template><div> <pdf ref='pdf' :src='http://www.cgvv.com.cn/bcjs/url'> </pdf></div></template>
重啟你的項(xiàng)目,訪問這個(gè)界面,你大概率會(huì)發(fā)現(xiàn)pdf已經(jīng)成功顯示在你的界面上了。這沒有任何問題,但是,正當(dāng)你準(zhǔn)備拿起一根煙,點(diǎn)上,伴著舒適的《美麗的梭羅河》,欣賞你成功的杰作的時(shí)候,你會(huì)發(fā)現(xiàn),我擦,為啥只有一頁,當(dāng)玻璃杯碰在一起,滿世界都是夢(mèng)破碎的聲音。
所以,這只是初體驗(yàn),如果你的pdf只有一頁,這樣寫當(dāng)然沒什么問題,但是當(dāng)我們呢pdf 有很多頁的時(shí)候,你會(huì)發(fā)現(xiàn),這行不通了。所以,接下來,我們來看看怎么讓它顯示多頁。
vue-pdf 漸入佳境:
其實(shí),想要顯示多頁也沒那么復(fù)雜,你每次就顯示一頁,我,直接v-for 循環(huán),直接顯示完,簡單粗暴。
頁面代碼:
<template> <div> <pdf v-for='i in numPages' :key='i' :src='http://www.cgvv.com.cn/bcjs/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 文件的路徑,可以是本地路徑,也可以是在線路徑。 numPages : pdf 文件總頁數(shù)。getNumPages 計(jì)算總頁數(shù),順便給url和numPages賦值。
唯一需要大家注意的是這句:
this.getNumPages('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf')
注意啊,這句不一定非要寫到mounted里面,你想寫哪就寫哪,比如你前端請(qǐng)求后端,后端返回一個(gè)pdf 的url,在那里寫就行,寫在你需要的地方。
vue-pdf 輕車熟路:
很多人看到這,就這,就這?萬一,我pdf有一千頁,我瀏覽器還不得裂開,我追求的是那種在微醺的下午,一頁一頁的翻看的感覺,你能給我嗎?
我不能,才怪,保證滿足你。
<template> <div> <div class='tools'> <bk-button :theme='’default’' type='submit' :title='’基礎(chǔ)按鈕’' @click.stop='prePage' class='mr10'> 上一頁</bk-button> <bk-button :theme='’default’' type='submit' :title='’基礎(chǔ)按鈕’' @click.stop='nextPage' class='mr10'> 下一頁</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='http://www.cgvv.com.cn/bcjs/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>
接下來,我們一一介紹這些都是個(gè)啥。
參數(shù)介紹:
page: 當(dāng)前顯示的頁數(shù),比如第一頁page=1 rotate : 旋轉(zhuǎn)角度,比如0就是不旋轉(zhuǎn),+90,-90 就是水平旋轉(zhuǎn)。 progress :當(dāng)前頁面的加載進(jìn)度,范圍是0-1 ,等于1的時(shí)候代表當(dāng)前頁已經(jīng)完全加載完成了。 page-loaded :頁面加載成功的回調(diào)函數(shù),不咋能用到。 num-pages :總頁數(shù) error :加載錯(cuò)誤的回調(diào) link-clicked:單機(jī)pdf內(nèi)的鏈接會(huì)觸發(fā)。其他:
print 這個(gè)是打印函數(shù)。 注意:谷歌瀏覽器會(huì)出現(xiàn)亂碼,這個(gè)和字體有關(guān)系。來,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: { // 上一頁函數(shù), prePage() { var page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一頁函數(shù) nextPage() { var page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, // 頁面順時(shí)針翻轉(zhuǎn)90度。 clock() { this.pageRotate += 90 }, // 頁面逆時(shí)針翻轉(zhuǎn)90度。 counterClock() { this.pageRotate -= 90 }, // 頁面加載回調(diào)函數(shù),其中e為當(dāng)前頁數(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]) },
具體樣式什么的我就不貼出來了,這些都不是重點(diǎn),完全可以改成自己喜歡的。
成品展示:
其他問題以及解決方案:
跨域問題:網(wǎng)上用pdf.js 很多都會(huì)遇到跨域問題,這個(gè)我今天實(shí)際應(yīng)用到自己的項(xiàng)目里面了,由于我服務(wù)端設(shè)置了跨域,所以沒有出現(xiàn)跨域的問題,如果出現(xiàn)跨域需要修改你后端的請(qǐng)求頭。
打印界面字符亂碼:這個(gè)我倒是碰到了,谷歌瀏覽器打印的時(shí)候,預(yù)覽界面真的變成了 真·方塊字 ,全是方塊。這個(gè)問題是因?yàn)槟鉷df中使用了自定義字體導(dǎo)致的,具體解決方案如下:
首先,找到這個(gè)文件:node_modules/vue-pdf/src/pdfjsWrapper.js
然后根據(jù)github上這個(gè)issue,其中紅色的是要?jiǎng)h掉的,綠色的是要加上去的,照著改就可以解決了。
地址: https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7
根據(jù)我的實(shí)際測(cè)試,是可以解決打印亂碼的問題的。
到此這篇關(guān)于vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼的文章就介紹到這了,更多相關(guān)vue pdf在線預(yù)覽內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. Springboot整合camunda+mysql的集成流程分析2. python中復(fù)數(shù)的共軛復(fù)數(shù)知識(shí)點(diǎn)總結(jié)3. html清除浮動(dòng)的6種方法示例4. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算5. PHP中file_get_contents設(shè)置header請(qǐng)求頭,curl傳輸選項(xiàng)參數(shù)詳解說明6. idea重置默認(rèn)配置的方法步驟7. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享8. idea自定義快捷鍵的方法步驟9. 利用FastReport傳遞圖片參數(shù)在報(bào)表上展示簽名信息的實(shí)現(xiàn)方法10. jsp網(wǎng)頁實(shí)現(xiàn)貪吃蛇小游戲
