vue-pdf打包后無法預覽問題及修復方式
起因
早上上班同事跟我說本地測試無誤提交到線上的pdf預覽下載功能在服務(wù)器上預覽白屏讓我看一下問題。
捉蟲：找不同
開始排查問題，發(fā)現(xiàn)異常提示：
- pro：
- dev：
dev雖有報錯但是正常顯示，無傷大雅，pro無報錯但是顯示失敗
1.路徑問題？
- 開始面向百度編程：發(fā)現(xiàn)網(wǎng)上有人有過打包后預覽失敗問題，是因為worker.js路徑問題。
- 但是區(qū)別是會有個404的報錯，這邊先不管試了再說，發(fā)現(xiàn)失敗。
2.不起眼的報錯
- 搜了百度、google，都沒發(fā)現(xiàn)其他相關(guān)的解決方案，看來只能靠自己了。
- 首先從不起眼的warning開始找起。
Warning: DocException - expected a valid Error.
然后打印了一下src的值，發(fā)現(xiàn)一個有意思的東西
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?!線索到這里就斷了。
但是，有一個忽略的細節(jié)，沒錯，那個warning，通常warning都不算錯，基本都是選擇性忽略，這次沒有任何問題只能取看看這個了。
首先全局搜索，發(fā)現(xiàn)報錯提示在這：
pdfjs-dist>es5>build>pdf.js 14109
然后發(fā)現(xiàn)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
執(zhí)行完成會生成一個patches文件夾，里面有個這樣的文件。
最后在 package.json 的 scripts 中加入
"scripts": {
"postinstall": "patch-package"
}
總結(jié)
搞定！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了uni-app 實現(xiàn)小程序登錄注冊功能,文中給大家介紹了實現(xiàn)思路，以及vuex和本地緩存的區(qū)別，需要的朋友可以參考下2019-10-10
vue中的v-show,v-if,v-bind的使用示例詳解
這篇文章主要介紹了vue中的v-show,v-if,v-bind的使用,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了詳解Axios 如何取消已發(fā)送的請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected&n
這篇文章介紹了解決VUE項目在IIS部署出現(xiàn)：Uncaught SyntaxError: Unexpected token ＜ 報錯的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
Vue+Openlayer實現(xiàn)圖形的拖動和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴展插件ol-ext，可以用來實現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動等操作，本文將主要介紹通過Openlayer實現(xiàn)圖形的拖動和旋轉(zhuǎn)，需要的同學可以學習一下2021-11-11
webpack+vue中使用別名路徑引用靜態(tài)圖片地址
這篇文章主要介紹了webpack+vue中使用別名路徑引用靜態(tài)圖片地址，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧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指令等等,下面這篇文章主要給大家介紹了八個Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue無法訪問.env.development定義的變量值問題及解決
這篇文章主要介紹了Vue無法訪問.env.development定義的變量值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效
這篇文章主要介紹了Vue實現(xiàn)監(jiān)聽某個元素滾動,親測有效！具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項目多環(huán)境配置(.env)的實現(xiàn)
最常見的多環(huán)境配置，就是開發(fā)環(huán)境配置,和生產(chǎn)環(huán)境配置，本文主要介紹了vue項目多環(huán)境配置的實現(xiàn)，感興趣的可以了解一下2021-07-07