起因

早上上班同事跟我說(shuō)本地測(cè)試無(wú)誤提交到線上的pdf預(yù)覽下載功能在服務(wù)器上預(yù)覽白屏讓我看一下問(wèn)題。

捉蟲(chóng)：找不同

開(kāi)始排查問(wèn)題，發(fā)現(xiàn)異常提示：

• pro：

• dev：

dev雖有報(bào)錯(cuò)但是正常顯示，無(wú)傷大雅，pro無(wú)報(bào)錯(cuò)但是顯示失敗

1.路徑問(wèn)題？

• 開(kāi)始面向百度編程：發(fā)現(xiàn)網(wǎng)上有人有過(guò)打包后預(yù)覽失敗問(wèn)題，是因?yàn)閣orker.js路徑問(wèn)題。
• 但是區(qū)別是會(huì)有個(gè)404的報(bào)錯(cuò)，這邊先不管試了再說(shuō)，發(fā)現(xiàn)失敗。

2.不起眼的報(bào)錯(cuò)

• 搜了百度、google，都沒(méi)發(fā)現(xiàn)其他相關(guān)的解決方案，看來(lái)只能靠自己了。
• 首先從不起眼的warning開(kāi)始找起。 

Warning: DocException - expected a valid Error.

然后打印了一下src的值，發(fā)現(xiàn)一個(gè)有意思的東西

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里了，那就看看報(bào)錯(cuò)提示，剛好有打印

WTF?!線索到這里就斷了。

但是，有一個(gè)忽略的細(xì)節(jié)，沒(méi)錯(cuò)，那個(gè)warning，通常warning都不算錯(cuò)，基本都是選擇性忽略，這次沒(méi)有任何問(wèn)題只能取看看這個(gè)了。

首先全局搜索，發(fā)現(xiàn)報(bào)錯(cuò)提示在這：

pdfjs-dist>es5>build>pdf.js 14109

然后發(fā)現(xiàn)reason為undefined，打印ex

報(bào)錯(cuò)信息：

“Failed to set the ‘responseType’ property on ‘XMLHttpRequest’: The response type cannot be changed for synchronous requests made from a document.”

一番找，終于把真實(shí)的報(bào)錯(cuò)信息找到了真實(shí)的報(bào)錯(cuò)信息【枚舉報(bào)錯(cuò)信息居然沒(méi)做兜底！】

接下來(lái)就簡(jiǎn)單了，找到出問(wèn)題的地方：

pdfjs-dist>es5>build>pdf.js 25685

xhr.open("GET", this.url);     
xhr.open("GET", this.url,true);

加上true即可

再進(jìn)行測(cè)試，pro版本和dev版本一致了成功預(yù)覽

修復(fù)bug

既然問(wèn)題找到了，修改后測(cè)試無(wú)誤，那就使用npx打個(gè)補(bǔ)丁

npx patch-package pdfjs-dist

執(zhí)行完成會(huì)生成一個(gè)patches文件夾，里面有個(gè)這樣的文件。

最后在 package.json 的 scripts 中加入

"scripts": {
 	"postinstall": "patch-package"
}

總結(jié)

搞定！

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論