vue-pdf打包后无法预览问题及修复方式
起因
早上上班同事跟我说本地测试无误提交到线上的pdf预览下载功能在服务器上预览白屏让我看一下问题。
捉虫：找不同
开始排查问题，发现异常提示：
- pro：
- dev：
dev虽有报错但是正常显示，无伤大雅，pro无报错但是显示失败
1.路径问题？
- 开始面向百度编程：发现网上有人有过打包后预览失败问题，是因为worker.js路径问题。
- 但是区别是会有个404的报错，这边先不管试了再说，发现失败。
2.不起眼的报错
- 搜了百度、google，都没发现其他相关的解决方案，看来只能靠自己了。
- 首先从不起眼的warning开始找起。
Warning: DocException - expected a valid Error.
然后打印了一下src的值，发现一个有意思的东西
pendingOperation = pendingOperation.then(function() {
var loadingTask;
if ( isPDFDocumentLoadingTask(src) ) {
if ( src.destroyed ) {
emitEvent('error', new Error('loadingTask has been destroyed'));
return
}
loadingTask = src;
} else {
loadingTask = createLoadingTask(src, {
onPassword: function(updatePassword, reason) {
var reasonStr;
switch (reason) {
case PDFJS.PasswordResponses.NEED_PASSWORD:
reasonStr = 'NEED_PASSWORD';
break;
case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
reasonStr = 'INCORRECT_PASSWORD';
break;
}
emitEvent('password', updatePassword, reasonStr);
},
onProgress: function(status) {
var ratio = status.loaded / status.total;
emitEvent('progress', Math.min(ratio, 1));
}
});
}
console.log(loadingTask)
return loadingTask.promise;
})
.then(function(pdf) {
pdfDoc = pdf;
emitEvent('num-pages', pdf.numPages);
emitEvent('loaded');
})
.catch(function(err) {
console.log(err)
clearCanvas();
clearAnnotations();
emitEvent('error', err);
})
- pro：
- dev：
既然走到rejected里了，那就看看报错提示，刚好有打印
WTF?!线索到这里就断了。
但是，有一个忽略的细节，没错，那个warning，通常warning都不算错，基本都是选择性忽略，这次没有任何问题只能取看看这个了。
首先全局搜索，发现报错提示在这：
pdfjs-dist>es5>build>pdf.js 14109
然后发现reason为undefined，打印ex
报错信息：
“Failed to set the ‘responseType’ property on ‘XMLHttpRequest’: The response type cannot be changed for synchronous requests made from a document.”
一番找，终于把真实的报错信息找到了真实的报错信息【枚举报错信息居然没做兜底！】
接下来就简单了，找到出问题的地方：
pdfjs-dist>es5>build>pdf.js 25685
xhr.open("GET", this.url);
xhr.open("GET", this.url,true);加上true即可
再进行测试，pro版本和dev版本一致了成功预览
修复bug
既然问题找到了，修改后测试无误，那就使用npx打个补丁
npx patch-package pdfjs-dist
执行完成会生成一个patches文件夹，里面有个这样的文件。
最后在 package.json 的 scripts 中加入
"scripts": {
"postinstall": "patch-package"
}
总结
搞定！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了uni-app 实现小程序登录注册功能,文中给大家介绍了实现思路，以及vuex和本地缓存的区别，需要的朋友可以参考下2019-10-10
vue中的v-show,v-if,v-bind的使用示例详解
这篇文章主要介绍了vue中的v-show,v-if,v-bind的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了详解Axios 如何取消已发送的请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected&n
这篇文章介绍了解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
Openlayer具有自己的扩展插件ol-ext，可以用来实现图形的拖拽、旋转、缩放、拉伸、移动等操作，本文将主要介绍通过Openlayer实现图形的拖动和旋转，需要的同学可以学习一下2021-11-11
这篇文章主要介绍了webpack+vue中使用别名路径引用静态图片地址，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面这篇文章主要给大家介绍了八个Vue中常用的v指令的相关资料,需要的朋友可以参考下2022-04-04
Vue无法访问.env.development定义的变量值问题及解决
这篇文章主要介绍了Vue无法访问.env.development定义的变量值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了Vue实现监听某个元素滚动,亲测有效！具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最常见的多环境配置，就是开发环境配置,和生产环境配置，本文主要介绍了vue项目多环境配置的实现，感兴趣的可以了解一下2021-07-07
最新评论