PDF.js —— vue專案中使用pdf.js顯示pdf檔案(流)
前言:專案中有一個需要預覽下載pdf的需求,網上找了很久,決定使用 pdf.js 完成。
第一步: 首先肯定是匯入外掛,我是從官網直接下載,連結:點選開啟連結,注意需要放在static檔案目錄下
注意:這裡面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer頁面把它作為靜態資源來編譯,基本想要的build和web這兩個重要資料夾的東西都正常編譯。當然你可以可以npm install一下,整個檔案放在static目錄下的不好地方就是打包會很大喲,但是比較方便。
第二步:使用pdf.js(即通過 iframe 標籤或 window.open() 方法開啟 web/viewer.html)
注意:我們這樣要顯示的是伺服器的pdf或者檔案流(主要是檔案流)
1. 通過 iframe 巢狀開啟pdf(src='/static/pdf/web/viewer.html?file=' + 伺服器 pdf 檔案地址) ==>> 檔案形式
2. 通過 window.open() 開啟伺服器返回的檔案流 ==>> 我使用的
encodeURI() 把字串編碼為 URI ==>> 不會對:/?&等uri中起分割作用的字元進行編碼;
encodeURIComponent() 把字串編碼為 URI 元件
注意:
1. pdf.js是不支援跨域檔案載入的 直接載入是不會成功的。會報 “file origin doesnot match viewer”錯誤。 所以我們得改變一下原始碼: ==>> 登出 viewer.js 的1565行即可
==>> 可搜尋 :throw new Error('file origin does not match viewer\'s');
2. 主要實現方法:將檔案地址或檔案流 傳入到 web/viewer.html 這個檔案中
參考部落格:https://blog.csdn.net/shentibeitaokong/article/details/80011900 ==>> 很詳細
https://blog.csdn.net/xinlingdexueba/article/details/79555678 ==>> 簡潔明瞭
https://www.jianshu.com/p/242525315bf6 ===>> 報錯情況
文章僅為本人學習過程的一個記錄,僅供參考,如有問題,歡迎指出!
對部落格文章的參考,若原文章博主介意,請聯絡刪除!請原諒