好一段時間沒有來簡書寫東西了测垛，因為來到了平安銀行(橙信)工作了，工作也比較忙秧均，上班也沒得外網(wǎng)食侮，最近公司給配置了一個mac電腦，終于可以有外網(wǎng)權限了目胡，但還是有很多限制锯七，微信，百度云盤等等吧誉己，都用不了眉尸，
最近項目中需要顯示保險的電子保單，但給的地址是一個pdf文件流，遇到了各種問題效五，跨域地消、android手機打不開......，最終選擇了pdf.js插件畏妖，viewer.html?file=的形式打開脉执，下面詳情介紹一下開發(fā)步驟，
一戒劫、 首先是導入插件半夷，從官網(wǎng)直接下載，鏈接：官網(wǎng)直接下載迅细，在vue項目中巫橄，注意放在static文件目錄下
簡單介紹一下pdf.js目錄，核心的pdf.js和pdf.worker.js茵典，以及展示pdf的viewer.html頁面湘换，把它們作為靜態(tài)資源來編譯，基本想要的build和web這兩個重要文件夾的東西都正常編譯统阿。
二彩倚、重點介紹一下viewer.html?file=打開pdf文件
1、打開viewer.js看看
"use strict";
var DEFAULT_URL = 'compressed.tracemonkey-pldi-09.pdf';
var pdfjsWebApp = void 0;
里面有配置項扶平，DEFAULT_URL 是默認的pdf路徑帆离，繼續(xù)看源代碼，發(fā)現(xiàn)他可以通過file參數(shù)用來指定pdf的路徑
用viewer.html?file= 的方式结澄，我是iframe進行嵌套
<iframe :src="url" width="100%" height="100%"></iframe>
2哥谷、當viewer.html頁面的域和pdf文件域不一致的時候，會報 “file origin does not match viewer”錯誤麻献。 所以我們得改變一下源碼
3们妥、file=后面跟的pdf地址也有參數(shù)，所以必須選擇 encodeURIComponent 進行對url的編碼
this.url = `${baseUrl.pageRoot}pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`
viewer.js里有方法parseQueryString(query)取到這個pdf文件地址后勉吻，會進行decodeURIComponent解碼
function parseQueryString(query) {
var parts = query.split('&');
var params = Object.create(null);
for (var i = 0, ii = parts.length; i < ii; ++i) {
var param = parts[i].split('=');
var key = param[0].toLowerCase();
var value = param.length > 1 ? param[1] : null;
params[decodeURIComponent(key)] = decodeURIComponent(value);
}
return params;
}
4监婶、如果還是打不開pdf文件，pdf.js插件可能無法識別pdfUrl餐曼，所以的在最后加上 &.pdf 來騙過插件
Q: 目前還遇到一個問題，GET請求pdfUrl時鲜漩，cookie信息沒有帶給后端源譬，目前是讓后端直接屏蔽了登錄驗證，請各位指教孕似。GET請求源碼如下：
webViewerOpenFileViaURL = function webViewerOpenFileViaURL(file) {
if (file && file.lastIndexOf('file:', 0) === 0) {
PDFViewerApplication.setTitleUsingUrl(file);
var xhr = new XMLHttpRequest();
xhr.onload = function () {
console.log('xhr onload() xhr.response = ' + xhr.response)
PDFViewerApplication.open(new Uint8Array(xhr.response));
};
try {
xhr.open('GET', file);
xhr.responseType = 'arraybuffer';
xhr.send();
} catch (ex) {
PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (msg) {
console.log('line 2010 loading_error msg = ' + msg)
PDFViewerApplication.error(msg, ex);
});
}
return;
}
if (file) {
PDFViewerApplication.open(file);
}
};
如果項目中想用pdf.js或pdf.worker.js的外鏈可以參考：https://www.bootcdn.cn/pdf.js/
例如build/pdf.worker.js文件太大踩娘，可以修改web/viewer.js中的workerSrc路徑，改為對應版本的cdn地址即可
