重点提示:全网通用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...