html使用pdf.js途中遇到的坑和坑

我从网上下载下来pdf文件夹，然后放到我自己的项目中去目录如下（pdfjs就是我下载下来的目录）

1.首先是html部分

<div class="mainIframeConent"> 
   <iframe style="margin-top:-40px" id="displayPdfIframe" src="" width="100%" height="100%"></iframe>
</div>

2.JS部分

const pdfUrl=‘1.pdf’;
   
$("#displayPdfIframe").attr("src",'pdfjs/web/viewer.html?pdfUrl='+pdfUrl+'');

注意重点来了，来了，它来了，把本地1.pdf改成https://testrecord.zhiyunyi.net/478a5a1a717840cb81aa07df20149634.pdf。此时傻了，不显示了

原因是：源码pdf.js不支持跨越pdf,也就是远程pdf,

以下为解决办法

3.首先我们修改viewer.js

第一处修改为：

window.webViewerLoad=function webViewerLoad(fileUrl) {//调整了此行
  var config = getViewerConfiguration();
  window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
  window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions;
  var event = document.createEvent('CustomEvent');
  event.initCustomEvent('webviewerloaded', true, true, {});
  document.dispatchEvent(event);
  //调整了if 语句
  if(fileUrl){
    config.defaultUrl=fileUrl;
  }
  pdfjsWebApp.PDFViewerApplication.run(config);
}

第二处修改：
注释下面三行

//if (document.readyState === 'interactive' || document.readyState === 'complete') {
  //webViewerLoad();
//} else {
  //document.addEventListener('DOMContentLoaded', webViewerLoad, true);
//}

第三处修改

run: function run(config) {
    var _that=this;
    //添加if语句
    if(config.defaultUrl){
      _app_options.AppOptions.set('defaultUrl',config.defaultUrl)

    }
    
    _that.initialize(config).then(function(){
      webViewerInitialized()
    });
  },

到这里viewer.js修改完成

4.viewer.html添加的代码如下

首先添加函数（pdfjs默认不支持预览跨域文件，但可以使用xhr2+createObejectUrl解决，具体改动如下：）

//添加xhrPdf函数,这个函数写在哪里都可以
function xhrPdf(url,callback) {
 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);//get请求，请求地址，是否异步
    xhr.responseType = "blob";    // 返回类型blob
    xhr.onload = function () {// 请求完成处理函数
        if (this.status === 200) {

            var blob = this.response;// 获取返回值
            var href = window.URL.createObjectURL(blob);
            callback(href)
            // location.href=href
            // location.href='viewer.html?file='+url

            // blobToDataURL(blob,function(data){
            //     console.log(data)

            // })

        }
    
    // 发送ajax请求
    xhr.send();

}

调用

function  getUrlParam(name) {
             var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
             var r = window.location.search.substr(1).match(reg)
             if (r != null) return unescape(r[2])
             return null
}
const pdfUrl =getUrlParam('pdfUrl');//传入的动态pdf远程路径
var h=xhrPdf(pdfUrl,function(href){
          webViewerLoad(href)
    })

到此处，激动的去预览，不错哦，可以完美展示了，坑又来了，又来了，他来了，pdf上红色的章不显示，555

5.解决章的办法如下

找到pdf.worker.js 搜 data.fieldType === 'Sig'

if (data.fieldType === 'Sig') {
     data.fieldValue = null;
     //注释掉下面银行
     // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}

到这里真的才算大功告成，结束了，这里源码不是我修改的，我贴上我搜索的原贴https://blog.csdn.net/wangzhikui1/article/details/87817192

第二天提出添加手势，然后我一搜索发现有更好用的pdf-pdfh5.js，发现这插件满足我一切需求，我折腾半天，妈啊！我醉也，网址https://www.gjtool.cn/archives/pdfh5