前言：專案中有一個需要預覽下載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   ===>> 報錯情況

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！

對部落格文章的參考，若原文章博主介意，請聯絡刪除！請原諒