vue-pdf打包后无法预览问题及修复方式

 更新时间:2024年03月21日 14:37:19   作者:抠脚玥  
这篇文章主要介绍了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"
}

总结

搞定!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅析Vue 生命周期

    浅析Vue 生命周期

    这篇文章主要介绍了Vue 生命周期的过程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • Vue前端如何实现生成PDF并下载功能详解

    Vue前端如何实现生成PDF并下载功能详解

    在前端的岗位上经常需要实现个生成个并下载的可视化图表页PDF文件,这篇文章主要给大家介绍了关于Vue前端如何实现生成PDF并下载功能的相关资料,需要的朋友可以参考下
    2021-10-10
  • VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

    这篇文章主要介绍了VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 详解vue-admin和后端(flask)分离结合的例子

    详解vue-admin和后端(flask)分离结合的例子

    本篇文章主要介绍了详解vue-admin和后端(flask)分离结合的例子,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • VUE和Antv G6实现在线拓扑图编辑操作

    VUE和Antv G6实现在线拓扑图编辑操作

    这篇文章主要介绍了VUE和Antv G6实现在线拓扑图编辑操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue点击input弹出带搜索键盘并监听该元素的方法

    vue点击input弹出带搜索键盘并监听该元素的方法

    今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue Cli中的环境变量和模式

    Vue Cli中的环境变量和模式

    这篇文章主要介绍了Vue Cli中的环境变量和模式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 前端面试之vue2和vue3的区别有哪些

    前端面试之vue2和vue3的区别有哪些

    这篇文章主要为大家介绍了前端面试之vue2和vue3的区别有哪些,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 详解vue项目中使用vuedraggable

    详解vue项目中使用vuedraggable

    这篇文章主要介绍了vue项目中使用vuedraggable,本文给大家介绍了错误问题分析及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • vue element 多图片组合预览的实现

    vue element 多图片组合预览的实现

    本文主要介绍了vue element多图片预览实现的相关资料,最近的项目中有图片预览的场景,本文就来介绍一下如何使用,感兴趣的可以了解一下
    2023-08-08

最新评论