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"
}

搞定！