在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訪問，如下所示：
然后重啟瀏覽器，即可訪問，
備注
浪淘沙·北戴河
大雨落幽燕，白浪滔天，秦皇島外打魚船，一片汪洋都不見，知向誰邊？往事越千年，魏武揮鞭，東臨碣石有遺篇，蕭瑟秋風今又是，換了人間，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270864.html
標籤：JavaScript
上一篇：WEB前端第六十五課——H5新特性：Worker執行緒、Files、FileReader、getUserMedia
下一篇：ES6核心特性