乐趣区

关于前端:移动端使用pdfjsdist来预览pdf文件的一些坑

jiezi

前言

最近公司挺多我的项目应用了 pdfjs-dist 这个库来实现挪动端预览 pdf，记录一下应用这个库外面的一些坑, pdfjs-dist 其实就是 pdf.js, 底层都是它, 原本认为间接引入，调用一下就好了，可谁想到居然还有坑，差点是无奈填过去的那种！！！

坑 1：无奈预览电子签章

问题形容

应用 pdf.js 来预览 pdf，别的内容都能够展现，就是这个电子签章死活出不来，电子签章如下图：

问题起因

官网没工夫搞，我在官网的 issue 外面看到了很多对于这个 issue 的探讨，

  • 还有说把源码的多少行给关上就好了的，我感觉这个形式也是不靠谱，有趣味能够看看下文：
    某個大佬的博客
    掘金

解決辦法

官网自救！！！10 年了终于加上了，官网在 2.9.359 版本外面修复了，十年了，你晓得我都经验了什么😅😅😅

  • 官网 issue

坑 2：globalthis is not defined

原本认为高高兴兴上线就完了，可谁晓得某一天在监控平台上看到了 globalthis is not defined 这个错，而且还挺多的，😅😅😅，不能欢快的搬砖了，而且这玩意听都没听说过，🤣🤣🤣，老规矩，不懂就谷歌一下，代码都是 cv 的，全靠大佬们了

问题形容

  • 以后我的项目 pdf 的版本是 “pdfjs-dist”: “2.13.216”
  • 另外两个我的项目的 pdf 版本 “pdfjs-dist”: “2.0.943”
  • 只有 ”pdfjs-dist”: “2.13.216” 这个版本会挂了，凉凉，“pdfjs-dist”: “2.0.943” 这个版本是 2018 年 10 月份公布的，这个版本没有问题，居然是能够的，搞事件哈！！！

  • 报错的浏览器版本，谷歌版本 68，相当老了

报错起因

查看 globalThis 兼容性，这货色在谷歌 71 版本和苹果浏览器 12.1 后才反对，问题很显著了，报错的浏览器版本是 68，不报错才怪了 就是 globalThis 的兼容性问题

  • globalThis mdn

解决办法

方法 1：这个亲测也能够的，看大佬们喜爱那个就撸那个咯

var getGlobal = function () {if (typeof self !== 'undefined') {return self;}
  if (typeof window !== 'undefined') {return window;}
  if (typeof global !== 'undefined') {return global;}
  throw new Error('unable to locate global object');
};

var globalThis  = getGlobal();

方法 2：反正这个 globalThis 在浏览器环境就是指向 window，直接判断一下，让他等于 window 不就好了，这种亲测也能够

// 因为应用了 pdf.js 来做预览 pdf，它的源码外面有应用了 globalThis 这个货色，这个货色的兼容性是谷歌 71 版本以上和苹果浏览器 12.1  以上，有兼容性问题，做个判断解决一下
   try {if(!window.globalThis){var globalThis = window}
     } catch (error) {console.error('globalThis 问题重现，请火速反馈给客服！！！', error)
     }

附送如何应用低版本调试的办法

同一操作系统装置多个不同版本谷歌 chrome 浏览器

结束语

  • 本文如有谬误，欢送斧正，非常感谢
  • 感觉有用的老铁，点个双击，小红心走一波
  • 欢送灌水，来呀，相互挫伤哈 o(∩_∩)o 哈哈
退出移动版