好一段时间没有来简书写东西了，因为来到了平安银行(橙信)工作了，工作也比较忙，上班也没得外网，最近公司给配置了一个mac电脑，终于可以有外网权限了，但还是有很多限制，微信，百度云盘等等吧，都用不了，
最近项目中需要显示保险的电子保单，但给的地址是一个pdf文件流，遇到了各种问题，跨域、android手机打不开......，最终选择了pdf.js插件，viewer.html?file=的形式打开，下面详情介绍一下开发步骤，
一、 首先是导入插件，从官网直接下载，链接：官网直接下载，在vue项目中，注意放在static文件目录下
image.png
简单介绍一下pdf.js目录，核心的pdf.js和pdf.worker.js，以及展示pdf的viewer.html页面，把它们作为静态资源来编译，基本想要的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路径，继续看源代码，发现他可以通过file参数用来指定pdf的路径
image.png
用viewer.html?file= 的方式，我是iframe进行嵌套
<iframe :src="url" width="100%" height="100%"></iframe>
2、当viewer.html页面的域和pdf文件域不一致的时候，会报 “file origin does not match viewer”错误。 所以我们得改变一下源码
image.png
3、file=后面跟的pdf地址也有参数，所以必须选择 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. = function () { console.log('xhr () 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);
}
};
作者：竿牍
链接：https://www.jianshu.com/p/f9363fe5c4f2
随时随地看视频
