利用pdf.js在線展現PDF文檔

在Web項目中，常常須要在瀏覽器端展現PDF文檔，本文經過一個簡單的小例子，簡述pdf.js的簡單使用，僅供學習分享使用，若有不足之處，還請指正。

pdf.js下載

pdf.js是一個通用的、基於web標準的、用於解析和呈現pdf的平臺。用戶能夠經過pdf.js的官方網站，進行下載，以下圖所示：

 

 

關於下載頁面說明：目前pdf.js的穩定版本就v2.6.347，Prebuilt是基於較新瀏覽器，採用了ES6的寫法。Prebuilt(for older browsers)基於舊版本瀏覽器，採用ES5的寫法。因此對於不支持ES6的瀏覽器，則須要下載ES5的庫。

瀏覽器支持ES6現狀

目前瀏覽器對於ES6的支持，還不是很完善，支持狀況以下所示：

•  桌面端瀏覽器對ES2015的支持狀況
  • Chrome：51 版起即可以支持 97% 的 ES6 新特性。
  • Firefox：53 版起即可以支持 97% 的 ES6 新特性。
  • Safari：10 版起即可以支持 99% 的 ES6 新特性。
  • IE：Edge 15能夠支持 96% 的 ES6 新特性。Edge 14 能夠支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）
•  移動端瀏覽器對ES2015的支持狀況
  • iOS：10.0 版起即可以支持 99% 的 ES6 新特性。
  • Android：基本不支持 ES6 新特性（5.1 僅支持 25%）
•  服務器對ES2015的支持狀況
  • Node.js：6.5 版起即可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

 具體支持狀況，可參考連接

關於pdf.js對瀏覽器支持

通過測試發現，新版本的pdf.js對IE瀏覽器已再也不支持，若是所屬項目須要支持IE瀏覽器，則是下載舊版本的pdf.js庫。具體支持狀況，以下所示：

 pdf.js對Chrome，Firefox瀏覽器支持友好，對於not Chromium-based的 IE11和Edge瀏覽器，新版本將再也不支持。具體可參考pdf.js的FAQ連接。

pdf.js目錄結構

pdf.js庫下載之後，文件目錄結構，以下所示：

├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE

備註：pdf.js不支持file:// urls 進行瀏覽，只支持https://urls的方式進行訪問。

pdf.js調用方式

pdf.js調用以具體項目爲準，本文介紹一種常見調用方式【viewer.html?file=文件路徑】，以下所示：

1 <div id="container">
2     <div id="article">
3         <iframe id="pdf" width="100%" height="800px" src="viewer.html?file=20210308.pdf">
4         </iframe>
5     </div>
6 </div>

示例效果圖

本示例爲了支持IE瀏覽器，則採用pdf.js版本爲pdfjs-2.5.207-es5-dist，在IE瀏覽器效果以下所示：

 

 

 關於pdfjs-2.5.207-es5-dist的下載連接，可點擊下載。

關於github.com相關問題

》》頁面訪問超時

如官網沒法打開，提示頁面沒法訪問，則須要配置hosts文件，路徑爲C:\Windows\System32\drivers\etc\hosts，打開文件，增長以下內容：

1 # GitHub Start 
2 140.82.112.4 github.com
3 199.232.69.194 github.global.ssl.fastly.net
4 # GitHub End

而後打開命令行窗口，執行ipconfig /flushdns命令便可。

備註：關於github官網ip地址查詢，能夠經過https://www.ipaddress.com/網站進行查詢。

》》TLS安全設置

在訪問github.com過程當中，如提示如下錯誤：

 

 

 則須要設置瀏覽器高級設置，容許TLS訪問，以下所示：

而後重啓瀏覽器，便可訪問。

備註

浪淘沙·北戴河

大雨落幽燕，白浪滔天，秦皇島外打魚船。一片汪洋都不見，知向誰邊？ 往事越千年，魏武揮鞭，東臨碣石有遺篇。蕭瑟秋風今又是，換了人間。