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" }
总结
搞定!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。