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

最新推荐文章于 2025-04-29 16:55:30 发布

没理由的花呗

最新推荐文章于 2025-04-29 16:55:30 发布

阅读量4.2k

点赞数 3

分类专栏： PDF.js Js 文章标签： javascript npm node.js

本文链接：https://blog.youkuaiyun.com/m0_37296026/article/details/124326870

版权

Js 同时被 2 个专栏收录

5 篇文章

订阅专栏

PDF.js

3 篇文章

订阅专栏

本文档详细介绍了如何切换和定制PDF.js版本，包括从官网获取源码、选择特定版本、安装依赖以及构建过程。特别指出，node.js版本需控制在10以下，以避免打包错误。此外，还提供了修改viewer.css以定制滚动条样式，以及viewer.js中关键方法的调整，如webViewerPageChanging、webViewerWheel、render、_updateUIState、draw等。同时，新增了getUrlParams方法用于获取URL参数，并注释了_setWriteToStorage方法中关于localStorage的部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PDF.js版本切换教程

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

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJu0tH15-1650532472270)(.\images\1.jpg)]$

3、版本选择

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j3FZodKT-1650532472271)(.\images\2.jpg)]$

点击 View all tags 如下图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ACaLjpvP-1650532472271)(.\images\3.jpg)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QzLuOUH3-1650532472272)(.\images\4.jpg)]$

接下来npm install (注意：node.js版本要控制到10以下，要不gulp会报错，导致打包失败)
如遇到node-pre-gyp WARN Using needle for node-pre-gyp https download 问题，可开启代理（dev-sidecar）重新安装

$- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4rfGeAe-1650532472272)(.\images\5.jpg)]$

构建 PDF.js

通用浏览器

gulp generic

如需支持旧版浏览器

gulp generic-legacy

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7N2W4roL-1650532472272)(.\images\6.jpg)]$

注意事项

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方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fUxedTEI-1650532472273)(.\images\7.jpg)]$

webViewerWheel方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zx35x3KJ-1650532472273)(.\images\8.jpg)]$
render方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K1qg3mHj-1650532472273)(.\images\9.jpg)]$
_updateUIState方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-exjTIjuP-1650532472274)(.\images\10.jpg)]$
draw方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOxlsabs-1650532472274)(.\images\11.jpg)]$

_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
    }
  }

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GztFyoiP-1650532472274)(.\images\12.jpg)]$

setInitialView方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oUc5MFem-1650532472274)(.\images\13.jpg)]$
_writeToStorage方法注释localStorage.setItem(‘pdfjs.history’, databaseStr);