pdf.js切换版本打包以及功能改造

PDF.js版本切换教程

1、pdf.js官网（http://mozilla.github.io/pdf.js/）

2、pdf.js源码（https://github.com/mozilla/pdf.js）

3、版本选择

• 点击 View all tags 如下图

• 选择对应版本zip包下载、解压

• 接下来npm install (注意：node.js版本要控制到10以下，要不gulp会报错，导致打包失败)

• 如遇到node-pre-gyp WARN Using needle for node-pre-gyp https download 问题，可开启代理（dev-sidecar）重新安装

构建 PDF.js

• 通用浏览器

gulp generic

• 如需支持旧版浏览器

gulp generic-legacy

• 打包完成后，将generic中文件替换到项目中

注意事项

• viewer.css中增加滚动条样式以及批注样式

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  /*定义滚动条轨道*/
  ::-webkit-scrollbar-track-piece {
    background-color: transparent;
    -webkit-border-radius: 6px;
  }
  
  /*定义滑块 垂直*/
  ::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: #a8a8a8;
    -webkit-border-radius: 6px;
  }
  
  /*定义滑块 水平*/
  ::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: #a8a8a8;
    -webkit-border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-color: #c1c1c1;
  }
  
  ::-webkit-scrollbar-thumb:active {
    background-color: #999;
  }
  
  

• viewer.js中修改

  • webViewerPageChanging方法

  

  • webViewerWheel方法

    

  • render方法

    

  • _updateUIState方法

    

  • draw方法

    

  • _createClass(BaseViewer 方法中增加

    {
        key: "getUrlParams",
        // 20220308-jj 获取url参数
        value: function getUrlParams() {
          //获取url
          var _url = window.location.search;
          if (_url === '') {
            _url = window.location.href;
          }
          //获取参数
          var urlParams = {};
          var reg = /[?&][^?&]+=[^?&]+/g;
          var arr = _url.match(reg);
          if (arr) {
            arr.forEach(function (item) {
              var tempArr = item.substring(1).split('=');
              var key = decodeURIComponent(tempArr[0]);
              var val = decodeURIComponent(tempArr[1]);
              urlParams[key] = val;
            });
          }
    
          return urlParams
        }
      }
    

    

  • setInitialView方法

    

  • _writeToStorage方法 注释localStorage.setItem(‘pdfjs.history’, databaseStr);