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