VUE實現PDF.js的pdf文件在線預覽

首先，要實現PDF在線預覽功能，需要PDF.js或者PDFObject.js插件，PDF.js可以實現統計閱讀進度，PDFObject.js只是顯示用的（這裡才用的是統計閱讀進度的方式實現在線PDF預覽）。

1.導入插件，我是從官網直接下載，鏈接：點擊打開鏈接，注意要放在static文件目錄下。

這樣webpack打包之後的路徑也一 一對應。這樣引入的文件比較大，如果想要npm install引入也可以，主要的就是目錄中的view.html文件，如果pdf在項目中，可以使用相對路徑進行預覽，不存在跨域問題。但是，如果想要預覽伺服器上的pdf，則是遠程預覽，這種方式會帶來跨域的問題。想要解決跨域問題，需要後台以文件流的形式返給我們，然後前台以文件流的形式打開，就不會出現這種跨域的問題啦。

2。使用iframe打開

<iframe id="pdfPlayer" src=" +URL + 介面?fileName= +Url) + " frameborder="0" height="600px"></iframe>

需要注意的是： file參數中默認只允許傳簡單路徑比如：http://www.aaa.com/aa.pdf. 如果你要瀏覽的pdf路徑需要傳參數的話。 這時候直接傳入的話會解析出錯， 因為pdf.js無法判斷參數是viewer.html的參數呢還是aa.pdf的參數。所以，

URL 必須進行encode編碼 ，encodeURIComponent() 把字元串編碼為 URI 組件

後台返給的文件流如下圖：

3。如果需要統計pdf閱讀進度，需要修改源碼，把當前閱讀頁碼存到緩存中的數據記錄給頁面，這樣就可以實現統計進度了。

謝謝觀看！

推薦閱讀：