pdfjs和ie11的相爱相杀

469 阅读2分钟

背景

公司的一个内网项目,需要做内网pdf改造,老项目,只能使用ie11进行预览。 然后盯上了pdfjs

image.png 新版本肯定不能使用,ie11只能使用es5的代码,太高版本js语法不支持,即使有legacy 版本的适配还是不行(实践结论) ie11下载pdfjs能够直接运行的最大的版本号为2.3x的版本,其余高版本都不行,会有js报错,导致无法运行。

基本使用

从github提供的版本一般是两种,源码和编译后的版本。

image.png

下载编译后的版本,含义build和web(如果下载源码版本需要用gulp自己打包才能生成build文件)

image.png

打包后的代码可以访问本地pdf文件,可以加载blob base64等数据,如果要通过url链接进行加载,需要对viewer.js进行注释

  // 注释掉 后可以通过url 加载  ?file=xxx
      if (origin !== viewerOrigin && protocol !== 'blob:') {
        throw new Error('file origin does not match viewer\'s');
      }

如果想要显示签章还需注释掉pdf.worker.js中的一段代码

    if (data.fieldType === 'Sig') {
      data.fieldValue = null;
      _this3.setFlags(_util.AnnotationFlag.HIDDEN);
    }

在打包后的文件中找到web/viewer.html 然后通过右键Open with live Server进行打开,不然直接浏览器打开会报错跨域,读不到文件

image.png

ie11正常访问 image.png

本地文件访问

在viewer.js 中修改这个文件访问路径,把你自己的文件放进来,改一下名称就能够预览

image.png

url链接访问

在这个viewer.js中会默认读取url中 file=xxx的参数,优先级大于本地文件的优先级。

image.png

显示bug

但是啊,但是,如果是在pdf上面有签名(一般为透明图层,但是ie11透明图层识别成了白色背景,导致签名的地方就回被遮盖) 但是在chrome 上面就能够显示 这个bug待定,后面有空解决了在来更新。

image.png