專案要求需要預覽pdf檔案，網上找了很久，大多數都是推薦pdf.js，自己起了解了一下，最後決定用pdf.js，

但是發現，在vue中使用這個很少！！！！！所以我就寫這一篇幫助一下vue使用pdfjs的朋友！

其實 這和前端框架無關的，直接使用pdf.js原生

     搜多了你就發現有幾個封裝pdf.js的vue元件，個人試驗了其中一個，效果不是很好，所以，當然啊，用原生

的是最好的啦！

   首先肯定是匯入外掛，我是從官網直接下載，連結：點選開啟連結，注意放在static檔案目錄下，

這裡面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer頁面把它作為靜態資源來編譯，基本想要的build和web這兩個重要資料夾的東西都正常編譯。當然你可以可以npm install一下，整個檔案放在static目錄下的不好地方就是打包會很大喲，我不是圖方便嘛。目錄結構放一下

其實就可以直接用的，網上很多，viewer.js 裡的

代表著檔案路徑，如果你專案中有個pdf檔案，那直接相對路徑就可以在頁面預覽，我今天說的是遠端預覽（伺服器端url預覽），pdf.js也提供了一種方法，

用file= 的方式也可以開啟喲，放在頁面上使用，我是iframe進行巢狀

    用這種方式必不可少的是跨域問題，你儲存檔案的伺服器路徑會和專案產生跨域，我的解決辦法是，讓後臺返回流的形式返回檔案，後臺程式碼案例：

注意：

1    pdf.js是不支援跨域檔案載入的  直接載入是不會成功的。會報  “file origin doesnot match viewer”錯誤。 所以我們得改變一下原始碼

把這句警告直接註釋就行了

2    file引數中預設只允許傳簡單路徑比如：http://www.a.com/file.php.  如果你要瀏覽的pdf路徑為http://www.a.com/file.php?id=2001。 這時候直接傳入的話會解析出錯， 因為pdf.js無法判斷id=2001是viewer.html的引數呢還是file.php的引數

 這告訴我們 url必須進行encode編碼  把引數file後傳入的動態引數中特殊字元轉義：

這裡又會有兩種方法：

encodeURI() 把字串編碼為 URI
encodeURIComponent() 把字串編碼為 URI 元件

發現        encodeURI不會對:/?&等uri中起分割作用的字元進行編碼；

encodeURIComponent則會。

所以必須選擇 encodeURIComponent 進行對url的編碼

舉例：

這樣如此就ok了

3  

如果 後臺返回給前臺的流的url形式 是

https://uat.hjl.hscf.com/api/esm/v1/contractTemplates/load?id=13&access_token=a33e14ef6aba87b593b1aac31e3d97bb

這樣pdf.js外掛是無法識別的，所以的在最後加上 &.pdf  來騙過外掛

效果圖

上面是pc端的，移動端也同樣試用，這裡以微信為例，ios可以用自帶的微信瀏覽器來進行pdf的預覽，而安卓則必須用pdf.js來預覽pdf咯，分辨ios與安卓的方法，我的部落格裡有喲！謝謝觀看，一起交流進步！

當然這是用iframe開啟的，我這裡也提供一種不是iframe開啟的樣式，因為pdf.js本質上是用canvas渲染的，我也是借鑑了他人的程式碼，具體我也忘了，放一下demo效果,(注意檢視伺服器返回流，token會失效，你測試的時候會報錯，我只是告訴你怎麼寫而已，謝謝)

如果對你有所幫助的話，歡迎star！ 謝謝