一、PDF預覽插件-pdf.js簡介
它是Mozilla開源一個插件pdf.js。支持主流瀏覽器顯示，唯一要求的是瀏覽器必須支持HTML5（PC和移動端都可兼容），兼容性強大，支持多語言文字顯示，使用方法簡便。
pdf.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負責API解析，一個負責核心解析。
二、使用場景
PC或者移動端預覽PDF文件的場景。
三、競品分析
| 名稱 |
使用方式 |
優點 |
缺點 |
| pdf.js |
viewer.html （使用viewer.html,以讀取文件流方式在線展示pdf文件） |
1、 支持多語言文本 2、 強大的功能特性（見四功能特性） 3、 懶加載文件，用戶體驗較好 |
1、 移動端不支持手勢縮放 2、 Vue項目框架下，使用方式不是最理想 |
| pdfjs-dist （將PDF文件渲染成Canvas） |
1、使用方法較為簡單。 |
1、部分文件預覽內容丟失（嚴重） 2、可配置項少，功能特性較少 3、展示效果不佳，會根據A4紙比例自動縮放，留白區域大。 4、性能較差，易崩潰 |
|
| pdfh5 |
pdfh5 （基於pdfjs進行封裝） |
1、 是否開啟懶加載 2、 是否允許pdf手勢縮放 3、 可配置項全，包含頁碼、背景圖模式等。 4、 使用方法最簡單 |
部分文件預覽內容丟失。（嚴重） |
結論：pdf.js有2種使用方式，從表上可見，pdfjs-dist這種方式和pdfh5都不可推薦，出現不可忽視的嚴重問題。所以，使用viewer.html,以讀取文件流方式在線展示pdf文件最為穩妥。
四、功能特性
- 縮放
- 縮略圖
- 下載
- 打印
- 全屏
- 翻頁
- 旋轉
- 單雙視圖
- 搜索
- 自由修改樣式
五、如何引用
以下是vue項目框架下的實現方式：
1、 目錄結構
pdf插件是放至public下。
2、 使用iframe標簽引入
<iframe ref="iframe" :src="pdfhtml" frameborder="0" class="iframe-box"></iframe>
3、 賦值
iframe src需要注意URI 編碼解碼問題
encodeURIComponent、decodeURIComponent
4、 Iframe通訊
預覽文件過程中，如需監聽加載成功、失敗等方法時，則需要與iframe進行通訊。
1) iframe向外部vue發送消息
// 向父vue頁面發送信息
window.parent.postMessage({
cmd: 'returnHeight',
params: {
success: true,
data: document.body.scrollHeight + 'px'
}
}, '*');
2) vue接收消息
mounted () {
// 在外部vue的window上添加postMessage的監聽，並且綁定處理函數handleMessage
window.addEventListener('message', this.handleMessage)
this.iframeWin = this.$refs.iframe.contentWindow
},
handleMessage (event) {
// 根據上面制定的結構來解析iframe內部發回來的數據
const data = event.data
switch (data.cmd) {
case 'returnFormJson':
// 業務邏輯
break
case 'returnHeight':
// 業務邏輯
break
}
}
3) 外部vue向iframe發送消息
this.iframeWin = this.$refs.iframe.contentWindow
// 外部vue向iframe內部傳數據
this.iframeWin.postMessage({
cmd: 'getFormJson',
params: {}
}, '*')
4) iframe接收消息
/ 接受父頁面發來的信息
window.addEventListener("message", function(event){
var data = event.data;
switch (data.cmd) {
case 'getFormJson':
// 處理業務邏輯
break;
}
});