前端pdf.js在线预览大坑合集

背景：

公司需要在线预览pdf

之前使用的方法

1.用iframe指向pdf路径：ios可以支持预览，安卓手机会跳转到下载页面。
2.office web app: 可以预览部分pdf文件，方便，代码修改量基本问零，但是当需要密码的pdf会直接，有蒙层遮盖，文件看不了，也不能下载。但是也可以通过修改office web app的样式文件去掉css样式。还有出现了部分pdf损坏的情况，所以不使用office web app预览pdf，而且最新版本也不支持pdf预览。

现在使用的是pdf.js插件

使用方式：
1.XXX/pdfjs/web/viewer.html?file=XXXX XXX为存放资源的路径，XXXX为文件地址

坑1：我们公司是网页端和移动端都需要预览pdf文件，不要去下载官方推荐的2.8.335版本。该版本安卓手机不能用。经过本人测试，2.5.207可以让移动端可用，附上链接 下载这个包。

坑2：原本的包不支持跨域浏览文件
将viewer.js 中的错误提示注释掉即可，记得viewer.js.map也要处理一下

    try {
      var viewerOrigin = new URL(window.location.href).origin || 'null';
      if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
        return;
      }
      var fileOrigin = new URL(file, window.location.href).origin;
      //跨域请求错误提示
      //if (fileOrigin !== viewerOrigin) {
        //throw new Error('file origin does not match viewer\'s');
      //}
    } catch (ex) {
      var message = ex && ex.message;
      PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
        PDFViewerApplication.error(loadingErrorMessage, { message: message });
      });
      throw ex;
    }
复制代码

坑3：无法显示电子签章

    if (data.fieldType === "Sig") {
      data.fieldValue = null;

      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
    }
复制代码

坑4：pdf设置横向时，预览pdf没有问题，打印会多打印一页空白页 这是稳定版2.8.335的样式，2.5.207版本的样式有bug。

/* wrapper around (scaled) print canvas elements */
  #printContainer > div {
    page-break-after: always;
    page-break-inside: avoid;

    /* The wrapper always cover the whole page. */
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #printContainer canvas,
  #printContainer img {
    /* The intrinsic canvas / image size will make sure that we fit the page. */
    max-width: 100%;
    max-height: 100%;

    direction: ltr;
    display: block;
  }
复制代码

公司需求导致改动： 需求1：pdf文件下载名字乱码，改动文件为viewer.js

function getPDFFileNameFromURL(url) {
  url = window.location.href;
  var defaultFilename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "document.pdf";

  if (typeof url !== "string") {
    return defaultFilename;
  }

  if (isDataSchema(url)) {
    console.warn("getPDFFileNameFromURL: " + 'ignoring "data:" URL for performance reasons.');
    return defaultFilename;
  }

  var reURI = /^(?:(?:[^:]+:)?\/\/[^\/]+)?([^?#]*)(\?[^#]*)?(#.*)?$/;
  var reFilename = /[^\/?#]+\.pdf\b(?!.*\.pdf\b)/i;
  var splitURI = reURI.exec(url);
  var suggestedFilename = reFilename.exec(splitURI[1]) || reFilename.exec(splitURI[2]) || reFilename.exec(splitURI[3]);

  if (suggestedFilename) {
    suggestedFilename = suggestedFilename[0];
    suggestedFilename = /printName=(.*?)&/.exec(decodeURIComponent(suggestedFilename));
    if (suggestedFilename) {
      suggestedFilename = suggestedFilename[1]
    }
  }

  return suggestedFilename || defaultFilename;
}
复制代码