小編這次要給大家分享的是vue如何使用vue-pdf實現(xiàn)pdf在線預(yù)覽，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

創(chuàng)新互聯(lián)服務(wù)項目包括十堰網(wǎng)站建設(shè)、十堰網(wǎng)站制作、十堰網(wǎng)頁制作以及十堰網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，十堰網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到十堰省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

背景

之前的demo增加了圖片預(yù)覽，于是今天下午追完番劇就突然想到能不能把pdf在線預(yù)覽也做了，說干就干，剛開始查了很多教程，我發(fā)現(xiàn)很多人都在說什么pdf.js這個庫，這當(dāng)然沒什么問題，pdf.js的確可以非常完美的實現(xiàn)pdf在線預(yù)覽的過程，但是感覺這樣直接進去有點不太優(yōu)雅，于是找找看看有沒有什么現(xiàn)成的組件，發(fā)現(xiàn)有vue-pdf這個組件，雖然說它沒有原生那樣強大，比如不支持pdf文字復(fù)制，打印會亂碼，但是我感覺已經(jīng)足以滿足我的需求了。本篇筆記循序漸進，從基礎(chǔ)的demo，到一個可用的程度，文末列出了大家在實際使用的過程中可能會遇到的問題和解決方案。

安裝：

這個沒有啥背景知識可講，我們直接跳到安裝環(huán)節(jié)，vue-pdf 和其他vue組件的安裝并無不同，打開命令行，敲入:

npm install --save vue-pdf

注意路徑。別在桌面調(diào)出來個終端安裝了，這種直接打回去重學(xué)Vue。

vue-pdf 初體驗：

安裝完之后，使用vue-pdf非常簡單，和其他的組件并沒有什么不同，上代碼：

首先我們需要引入這個組件：

然后在頁面使用vue-pdf,只需要添加標簽：

重啟你的項目，訪問這個界面，你大概率會發(fā)現(xiàn)pdf已經(jīng)成功顯示在你的界面上了。這沒有任何問題，但是，正當(dāng)你準備拿起一根煙，點上，伴著舒適的《美麗的梭羅河》，欣賞你成功的杰作的時候，你會發(fā)現(xiàn)，我擦，為啥只有一頁，當(dāng)玻璃杯碰在一起，滿世界都是夢破碎的聲音。

所以，這只是初體驗，如果你的pdf只有一頁，這樣寫當(dāng)然沒什么問題，但是當(dāng)我們呢pdf 有很多頁的時候，你會發(fā)現(xiàn)，這行不通了。所以，接下來，我們來看看怎么讓它顯示多頁。

vue-pdf 漸入佳境：

其實，想要顯示多頁也沒那么復(fù)雜，你每次就顯示一頁，我，直接v-for 循環(huán)，直接顯示完，簡單粗暴。

頁面代碼:

各個屬性：

• url ：pdf 文件的路徑，可以是本地路徑，也可以是在線路徑。
• numPages ： pdf 文件總頁數(shù)。

getNumPages 計算總頁數(shù)，順便給url和numPages賦值。

唯一需要大家注意的是這句：

this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")

注意啊，這句不一定非要寫到mounted里面，你想寫哪就寫哪，比如你前端請求后端，后端返回一個pdf 的url，在那里寫就行，寫在你需要的地方。

vue-pdf 輕車熟路：

很多人看到這，就這，就這？萬一，我pdf有一千頁，我瀏覽器還不得裂開，我追求的是那種在微醺的下午，一頁一頁的翻看的感覺，你能給我嗎？

我不能，才怪，保證滿足你。

接下來，我們一一介紹這些都是個啥。

參數(shù)介紹：

• page: 當(dāng)前顯示的頁數(shù)，比如第一頁page=1
• rotate ： 旋轉(zhuǎn)角度，比如0就是不旋轉(zhuǎn)，+90，-90 就是水平旋轉(zhuǎn)。
• progress ：當(dāng)前頁面的加載進度，范圍是0-1 ，等于1的時候代表當(dāng)前頁已經(jīng)完全加載完成了。
• page-loaded ：頁面加載成功的回調(diào)函數(shù)，不咋能用到。
• num-pages ：總頁數(shù)
• error ：加載錯誤的回調(diào)
• link-clicked：單機pdf內(nèi)的鏈接會觸發(fā)。

其他：

• print 這個是打印函數(shù)。 注意：谷歌瀏覽器會出現(xiàn)亂碼，這個和字體有關(guān)系。

來，js代碼走一個:

其他騷操作：

// 打印全部
pdfPrintAll() {
 this.$refs.pdf.print()
 },
// 打印指定部分
pdfPrint() {
 this.$refs.pdf.print(100, [1, 2])
 },

具體樣式什么的我就不貼出來了，這些都不是重點，完全可以改成自己喜歡的。

成品展示：

其他問題以及解決方案：

跨域問題：
網(wǎng)上用pdf.js 很多都會遇到跨域問題，這個我今天實際應(yīng)用到自己的項目里面了，由于我服務(wù)端設(shè)置了跨域，所以沒有出現(xiàn)跨域的問題，如果出現(xiàn)跨域需要修改你后端的請求頭。

看完這篇關(guān)于vue如何使用vue-pdf實現(xiàn)pdf在線預(yù)覽的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。