vue-cli2.0使用pdf.js出现无法加载pdf.worker.js的问题

JavaScript031

vue-cli2.0使用pdf.js出现无法加载pdf.worker.js的问题,第1张

我在项目中使用的是pdf-dist,使用的方法为

出现的问题为

出现问题的原因是因为无法加载pdf.worker.js文件,阅读源码发现通过pdf实列下的GlobalWorkerOptions.workerSrc属性可以设置pdf.worker.js的读取路径

如果还出现了下面这个错误

是因为浏览器版本过低不支持allSettled方法

一、遇到的问题 :预览pdf文件时,很多内容未显示。****

查看控制台,出现以下警告

二、跟踪源码,排查原因

从下图可以发现baseUrl取值为params.cMapUrl

找到调用WorkerTransport方法处:

该问题的原因是因为缺少了部分字体包,也可使用CDN方式加载字体包。

此处提供cmaps的2个CDN地址(2.2.228为pdfjs-dist的版本号):

https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/

https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/

加载字体包后,效果如下图(部分内容已打马赛克):

您好,两种方案:一种直接链接,把pdf文件当作img文件,类似<a href=""/>这种形式,这样链接:代码如下:<frame src="pdf文件的地址"></frame>另一种:使用js插件哈。 其中实现阅读pdf文件的js插件很多,比如:pdf.js:是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持;jsPDF:是一个使用Javascript语言生成PDF的开源库(IE暂不支持); 比较简单易上手的js插件:PDFObject.js,是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。 效果如下: PDFObject.js目前已经升级到1.2,可以支持IE9.PDFObject.js宗旨:Sometimes you need a little JavaScript. When you do, try PDFObject.来看看少之又少的js代码:代码如下:<script type="text/javascript"> window.onload = function (){ var success = new PDFObject({ url: "sample.pdf" }).embed() }</script>OK,这样就可以了。只要把地址写对即可。若我在某一个div中加载pdf咋办呢?看官网,发现embed()方法可以有参数的,无参数是指body,有参数是具体的某一个位置。代码如下:<script type="text/javascript"> window.onload = function (){ var success = new PDFObject({ url: "sample.pdf" }).embed(“div的id”) }</script>当然,其中还可以进一步设置参数,比如你想以多少秒的速度预览,有css,无css等。