重点提示：全网通用pdf查看的功能都是使用vue-pdf这个插件，除了各种坑外，最致命的一点就是，它的npm包有一个Bug，在第一次查看之后，再次查看，页面会空白并报错：Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached，这个报错如果不知道原因，去百度就如大海捞针，以下就是各种问题出现场景+解决方案。

致命坑原因分析：引入了CMapReaderFactory导致，通过动态import PDF的语言文件实现解决中文显示的问题，但是第二次加载PDF的时候页面是空白页，在你第一次加载PDF的时候，bcmap的返回值是Uint8Array[43366]的数组对象，而第二次预览PDF加载时发现bcmap的返回值是Uint8Array []的空数组，是因为缓存问题，第二次加载时取的是初次加载PDF文件时的语言文件的loadModules的缓存，但是取的过程中导致了失败，返回了空值，所以CMapReaderFactory代码应该加上一行：delete require.cache[require.resolve('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap')];vue-pdf-signature这个包，为已经更改并发布到npm的新包，项目中可以直接使用。

为了更好兼容及必坑，弃用原本vue-pdf插件，替换为vue-pdf-signature，安装及使用如下：

1.安装依赖

npm install --save vue-pdf-signature

2. 页面使用

<pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" frameborder="0"></pdf>import pdf from 'vue-pdf-signature'
// 中文PDF加载空白引入依赖
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'data() {return {numPages: 1,pdfSrc: ''}
},this.$on('show', (url) => {// 1.解决中文PDF加载空白并报错：Warning: Error during font loading: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.解决办法：this.pdfSrc = pdf.createLoadingTask({ url: url, CMapReaderFactory })// 3.解决PDF存在分页，进行分页加载pdf.createLoadingTask(url).promise.then(pdf => {this.numPages = pdf.numPages})
})

CMapReaderFactory文件查看地址： node_modules/vue-pdf-signature/src/CMapReaderFactory.js vue-pdf-signature包更改后，正确代码：

新增代码：其余不变

delete require.cache[require.resolve('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap')];

项目运行后，会报错编译失败：

是因为core-js版本不兼容，继续安装包：cnpm install core-js@2，到此完美解决

原创参考：原文链接：blog.csdn.net/chenzhiyong…

end...

vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案相关推荐

vue pdf下载及预览（移动端）
本文使用的是 vue-pdf,其实还有其他的很多比如pdf.js,只不过觉得这个和vue结合了应该不用下载一堆东西,直接npm install就可以,所以采用vue-pdf来撰写pdf下载及预览. 无 ...
vue pdf文件下载 / 在线预览真是有效！
1.pdf下载首先说下下载问题, 通过文件地址下载存留问题无法下载试过a标签搭配文件地址下载,最后发现行不通,一点击下载就直接打开了,不符合需求. 通过文件流形式,完美解决, 这里通过后端把文 ...
fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
vue-pdf+element实现全屏窗口pdf分页预览，pdf打印实现和解决打印乱码
一.源码 vue-pdf打印实现和乱码解决https://download.csdn.net/download/lucky_fang/85498529 二.全屏窗口打印预览效果分页预览pdf 窗口采 ...
Vue中使用pdfJs预览PDF、图片
Vue中使用pdfJs预览PDF.图片 pdf.js是一个使用HTML5构建的可移植文档格式库.它可以帮助我们在浏览器中构建pdf文档,实现在线查看pdf文件的功能. 实现步骤如下: 1.下载pdfJ ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
访问内网文件思路如下: 1.后端将word.excel.pdf文件转为二进制文件流前端将文件流转为html从而实现文件预览 2.pdf没这么复杂具体可看下文 3.ppt的实现方式是后端将ppt转为p ...
vue移动端文件预览
vue移动端文件预览前言: 整体思路: 具体实现: 一.外壳(vViews.vue): 二.文件预览: 1.图片预览: 2.pdf文件预览: 3.docx文件预览: 4.excel表格预览(xls. ...

vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案

1.安装依赖

2. 页面使用

新增代码：其余不变

项目运行后，会报错编译失败：

是因为core-js版本不兼容，继续安装包：cnpm install core-js@2，到此完美解决

end...

vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案相关推荐

最新文章

热门文章

vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案

1.安装依赖

2. 页面使用

新增代码： 其余不变

项目运行后，会报错编译失败：

是因为core-js版本不兼容，继续安装包：cnpm install core-js@2，到此完美解决

end...

vue-pdf使用+分页预览+第一查看正常，第二次查看空白解决方案相关推荐

最新文章

热门文章

新增代码：其余不变