Vue專案使用pdf.js

Zoom發表於2019-05-13
VueJS

前段時間有個支援線上學習功能的專案，有需要線上預覽pdf格式課件的功能，我就想線上預覽pdf多簡單，因為大部分瀏覽器都支援開啟pdf檔案，所以直接放個iframe然後src是pdf檔案的地址不就行了嗎，so easy！！（什麼？相容性？相容性是什麼東西？（づ￣3￣）づ不是Chrome別跟我說話）

本來以為就這樣了，可惜，天不遂人願，領導來提需求了，我們這是支援教學、學習的平臺，所以pdf的內容需要支援複製的，並且因為老師要講課，最好能夠支援類似PPT播放的功能......相顧無言，瀏覽器直接開啟的就支援複製，但是播放功能是什麼鬼喲！（我好慘一男的）

Vue專案使用pdf.js
吐槽一番，還是老老實實去實現功能吧，但是GitHub找了一圈vue專案的pdf輪子，基本都是大同小異，基本思想就是使用canvas把pdf內容繪製出來，但是這樣最大的一個問題就是pdf的內容完全沒辦法複製了，第一個需求就不滿足了，沒辦法只能擴大搜尋範圍，最終瞄準了pdf.js，在官網的demo裡試了下，領導的需求完全滿足，所以只能排除萬難把pdf.js引入專案了。

匯入pdf.js外掛

1.官網下載源包

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

Vue專案使用pdf.js

2.放入專案

放在vue專案static目錄下，目錄結構如下：

Vue專案使用pdf.js

3.修改一些原始碼配置

因為pdf.js是不支援跨域檔案載入的 直接載入是不會成功的。會報 “file origin doesnot match viewer”錯誤，所以需要把viewer.js檔案內的丟擲錯誤這一行報錯註釋掉，這個修改是看了這位老哥的部落格，貼上他的文章地址：連結

Vue專案使用pdf.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

Vue專案使用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吧。

看看時間也差不多了，準備下班

下班我是一定要走的，耶穌都攔不住，我說的！！

Vue專案使用pdf.js

相關文章