vue项目中使用pdf.js预览pdf文件（流）

好一段时间没有来简书写东西了，因为来到了平安银行(橙信)工作了，工作也比较忙，上班也没得外网，最近公司给配置了一个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.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地址即可

vue项目中使用pdf.js预览pdf文件（流）

推荐阅读更多精彩内容