Vue項目使用pdf.js

前段時間有個支持在線學習功能的項目，有須要在線預覽pdf格式課件的功能，我就想在線預覽pdf多簡單，由於大部分瀏覽器都支持打開pdf文件，因此直接放個iframe而後src是pdf文件的地址不就好了嗎，so easy！！（什麼？兼容性？兼容性是什麼東西？（づ￣3￣）づ不是Chrome別跟我說話）

原本覺得就這樣了，惋惜，天不遂人願，領導來提需求了，咱們這是支持教學、學習的平臺，因此pdf的內容須要支持複製的，而且由於老師要講課，最好可以支持相似PPT播放的功能......相顧無言，瀏覽器直接打開的就支持複製，可是播放功能是什麼鬼喲！（我好慘一男的）

吐槽一番，仍是老老實實去實現功能吧，可是GitHub找了一圈vue項目的pdf輪子，基本都是大同小異，基本思想就是使用canvas把pdf內容繪製出來，可是這樣最大的一個問題就是pdf的內容徹底沒辦法複製了，第一個需求就不知足了，沒辦法只能擴大搜索範圍，最終瞄準了pdf.js，在官網的 demo裏試了下，領導的需求徹底知足，因此只能排除萬難把pdf.js引入項目了。

導入pdf.js插件

1.官網下載源包

貼上地址，不想踩坑就老老實實下載穩定版本吧

2.放入項目

放在vue項目static目錄下，目錄結構以下：

3.修改一些源碼配置

由於pdf.js是不支持跨域文件加載的 直接加載是不會成功的。會報 「file origin doesnot match viewer」錯誤，因此須要把viewer.js文件內的拋出錯誤這一行報錯註釋掉，這個修改是看了這位老哥的博客，貼上他的文章地址：連接

項目使用

使用的話很簡單，頁面放一個iframe，而後src等於到viewer.html的相對路徑，而後file=後端返回的文件路徑'/static/pdfjs/web/viewer.html?file=' + pdfVisitUrl，這樣就大功告成了..........纔怪！！！坑仍是要爬的，固然後端返回流文件形式前端解析打開固然是更好了，這個能夠看一下上面貼的那個博客

坑1

由於服務端返回的是文件連接，可是爲了保證文件的保密性，防止連接直接複製給其餘人其餘人就能夠隨便打開使用這個問題，後端開發人員在文件連接後面添加了一些具備時效性的token之類的東西，而後文件連接就變成這樣了http://10.20.124.151/group1/M00/00/02/ChR8l1zBdSuAXoATAAvc4itpNIU648.pdf?token=ee94d7d3b3452c62b18364698839834b，可是pdf.js默認只容許傳簡單路徑，由於pdf.js沒法判斷token是viewer.html的參數仍是所要預覽文件的參數，因此須要先對返回的文件連接進行encodeURIComponent編碼

<iframe
    :src="`/static/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfVisitUrl)}`"
    frameborder="0"
    class="pdf-window"
>
</iframe>
複製代碼

這樣的話這個坑算是爬過了

坑2

解決了上面的問題，是否是以爲差很少了，我能說到這個時候我程序都還無法運行，頁面仍是黑的嗎？由於pdf.js做爲靜態資源根本沒被識別打包，相對路徑根本找不到，我使用npm run build打包嘗試了一下發現打包後的文件中根本找不到pdf.js

後來研究了webpage，發現針對靜態資源打包主要是使用一個copy-webpack-plugin的插件，因此在webpack.prod.conf.js和webpack.dev.conf.js兩個文件中加上下面代碼

const CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin([
    {
    from: path.resolve(__dirname, '../src/static'), // 這個路徑使用的是static目錄相對於當前js文件的相對路徑
    to: config.dev.assetsSubDirectory,
    ignore: ['.*'] // 匹配全部，把static目錄下文件一股腦所有做爲靜態資源打包，省的一些幺蛾子
    }
])
複製代碼

保存，從新npm run dev，此次終於ojbk了，能夠洗洗睡了

可是，後面我看了一下其餘版本的vue-cli發現不少版本的都可以直接把pdf.js做爲靜態資源正常打包，可能就咱們項目使用的這個版本是個坑吧，因此若是你在開發中發現靜態資源能夠正常打包就忽略坑2吧。

看看時間也差很少了，準備下班