[移动开发]移动端如何使用pdf.js，附问题合集（跨域，签章不显示等）

开发技术：mui+jquery
开发方式：前后端分离
pdfjs版本：pdfjs-2.4.456
版本提取链接
链接: https://pan.baidu.com/s/1KLHx_8r_M9VUAKyhSR_7MQ
提取码: gunb

使用方法

base64格式展示方法：
$.ajax({
                type: 'get',
                url: url, //接口地址
                xhrFields: { responseType: "blob"},
                success:function(result){
                    var showpdfUrl = new Blob([result], {type: 'application/pdf; charset=UTF-8'});
                    $("#pdfShow").attr("src", "../pdfjs/web/viewer.html?file=" + encodeURIComponent(window.URL.createObjectURL(showpdfUrl)));
                },
                error:function(event){
                }
       })

当接口返回的是base64格式的pdf时，需要在ajax中配置responseType的属性，
值得注意的是responseType需要放在xhrFields中配置才能成功！！！
    
直接返回链接展示方式：
$.ajax({
                type: 'get',
                url: url, //接口地址
                success:function(result){
                    var showUrl = result.split("?")[0] + "?" + encodeURIComponent(result.split("?")[1]);
            		$("#pdfShow").attr("src","../../../../pdfjs/web/viewer.html?file=" + showUrl);
                },
                error:function(event){
                }
       })

问题合集

1.引入pdf插件最开始出现的跨域问题
2.pdf文件中签章不显示问题
3.pdf文件在安卓上能正常展示，但是在ios上报错问题

跨域问题

在pdfjs/web/viewer.js文件，将如下代码注释掉即可

// if (origin !== viewerOrigin && protocol !== "blob:") {
      //   throw new Error("file origin does not match viewer's");
     // }

签章不显示问题

在pdfjs/build/pdf.worker.js文件，将如下代码注释掉即可

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

ios兼容问题

当时的情况是测试环境部署无兼容性问题，正式环境部署ios不兼容，仔细排查后发现后端返回的链接地址如下：

而在正式环境上去访问这个链接的时候，将前缀改为正式环境的ip地址，即可解决ios的兼容问题