移动端使用pdfjs-dist来预览pdf文件的一些坑

前言

最近公司挺多项目使用了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 哈哈