vue-pdf打包后無(wú)法預(yù)覽問(wèn)題及修復(fù)方式
起因
早上上班同事跟我說(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中uni-app 實(shí)現(xiàn)小程序登錄注冊(cè)功能
這篇文章主要介紹了uni-app 實(shí)現(xiàn)小程序登錄注冊(cè)功能,文中給大家介紹了實(shí)現(xiàn)思路，以及vuex和本地緩存的區(qū)別，需要的朋友可以參考下2019-10-10
vue中的v-show,v-if,v-bind的使用示例詳解
這篇文章主要介紹了vue中的v-show,v-if,v-bind的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了詳解Axios 如何取消已發(fā)送的請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
解決VUE項(xiàng)目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項(xiàng)目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜ 報(bào)錯(cuò)的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue+Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴(kuò)展插件ol-ext，可以用來(lái)實(shí)現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動(dòng)等操作，本文將主要介紹通過(guò)Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)，需要的同學(xué)可以學(xué)習(xí)一下2021-11-11
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧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指令等等,下面這篇文章主要給大家介紹了八個(gè)Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue無(wú)法訪問(wèn).env.development定義的變量值問(wèn)題及解決
這篇文章主要介紹了Vue無(wú)法訪問(wèn).env.development定義的變量值問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)某個(gè)元素滾動(dòng),親測(cè)有效！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項(xiàng)目多環(huán)境配置(.env)的實(shí)現(xiàn)
最常見(jiàn)的多環(huán)境配置，就是開(kāi)發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項(xiàng)目多環(huán)境配置的實(shí)現(xiàn)，感興趣的可以了解一下2021-07-07