前言
最近公司挺多项目使用了pdfjs-dist这个库来实现移动端预览pdf,记录一下使用这个库里面的一些坑, pdfjs-dist 其实就是pdf.js,底层都是它,本来以为直接引入,调用一下就好了,可谁想到竟然还有坑,差点是无法填过去的那种!!!
坑1:无法预览电子签章
问题描述
使用pdf.js来预览pdf,别的内容都可以展示,就是这个电子签章死活出不来,电子签章如下图:
![电子签章 移动端使用pdfjs-dist来预览pdf文件的一些坑_第1张图片](http://img.e-com-net.com/image/info9/695e997f7e284dfc8fcd5d2921763e92.jpg)
问题原因
官网没时间搞,我在官网的issue里面看到了很多关于这个issue的讨论,
- 还有说把源码的多少行给打开就好了的, 我觉得这个方式也是不靠谱,有兴趣可以看看下文:
某個大佬的博客
掘金
解決辦法
官方自救!!! 10年了终于加上了,官网在2.9.359版本里面修复了,十年了,你知道我都经历了什么
坑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月份发布的,这个版本没有问题,竟然是可以的,搞事情哈!!!
![错误1 移动端使用pdfjs-dist来预览pdf文件的一些坑_第4张图片](http://img.e-com-net.com/image/info9/c9a28336d7044e79a3a5bcb09a3e5fe0.jpg)
- 报错的浏览器版本,谷歌版本68,相当老了
![谷歌版本68 移动端使用pdfjs-dist来预览pdf文件的一些坑_第5张图片](http://img.e-com-net.com/image/info9/abe469f2fee94af7ab0040d6bf4f41d2.jpg)
报错原因
查看globalThis 兼容性,这东西在谷歌71版本和苹果浏览器 12.1 后才支持,问题很明显了,报错的浏览器版本是68,不报错才怪了 就是globalThis的兼容性问题
解决办法
办法1:这个亲测也可以的,看大佬们喜欢那个就撸那个咯
![官网demo 移动端使用pdfjs-dist来预览pdf文件的一些坑_第7张图片](http://img.e-com-net.com/image/info9/886310d80a8b434ab03b4240396ef808.jpg)
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不就好了,这种亲测也可以
![官网demo 移动端使用pdfjs-dist来预览pdf文件的一些坑_第8张图片](http://img.e-com-net.com/image/info9/5ed9052f5ac64ab88f2a17d75c40a9b2.jpg)
// 因为使用了pdf.js 来做预览pdf,它的源码里面有使用了globalThis这个东西,这个东西的兼容性是谷歌71版本以上和苹果浏览器12.1 以上,有兼容性问题,做个判断处理一下
try {
if(!window.globalThis){
var globalThis = window
}
} catch (error) {
console.error('globalThis 问题重现,请火速反馈给客服!!!', error)
}
附送如何使用低版本调试的方法
同一操作系统安装多个不同版本谷歌chrome浏览器
结束语
- 本文如有错误,欢迎指正,非常感谢
- 觉得有用的老铁,点个双击,小红心走一波
- 欢迎灌水,来呀,互相伤害哈 o(∩_∩)o 哈哈