这里写自定义目录标题

起因

早上上班同事跟我说本地测试无误提交到线上的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"
}

搞定!

Logo

前往低代码交流专区

更多推荐