vue-pdf的使用及注意事项
前端能通过base64pdf或者pdf地址展示出PDF显示出来,甚至能显示出带有签章的PDF文件
·
使用
1.npm install vue-pdf
2.在页面使用vue-pdf
<template>
<div>
<pdf v-for="i in numPages" :key="i" :page="i" :src="src"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components:{
pdf
},
props:{
pdfSrc: String
},
data(){
return {
numPages: null,
pdfSrc:'',//base64pdf或地址,如果是base64pdf 建议新建一个js文件单独写,因为字符串很长,很容易导致文件过大,字符串也编译不过来,可能本地运行还运行不起来
src: "",//调完方法返回显示的PDF
}
},
mounted() {
this.getBase64Pdf() // base64pdf 文件的预览
this.getUrlPdf() // pdf 文件地址的预览
},
methods:{
// #计算pdf页码总数
getBase64Pdf() {
// 引入pdf.js的字体
let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
// let CMAP_URL = `${window.location.origin}/cmaps/`; 可以使用本地的字体
// base64pdf拼接
let perfix64 = 'data:application/pdf;base64,' + this.pdfSrc
this.src = pdf.createLoadingTask({
url: perfix64,
withCredentials: false,
cMapUrl: CMAP_URL,
cMapPacked: true
});
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
console.log(this.numPages)
}).catch(err => {
console.error('pdf 加载失败', err);
})
},
getUrlPdf(){
this.src = pdf.createLoadingTask({
url: this.pdfSrc, //pdf地址
withCredentials: false
});
this.src.promise.then(pdf => {
this.numPages = pdf.numPages
console.log(this.numPages)
}).catch(err => {
console.error('pdf 加载失败', err);
})
}
}
}
</script>
注意事项
1、如果是base64pdf 建议新建一个js文件单独写,因为字符串很长,很容易导致文件过大,字符串也编译不过来,可能本地运行还运行不起来
2、PDF文件有电子签章但现实不出来的正确解决方法如下
- 步骤一 找到 vue-pdf 文件夹。首先我们要找到 vue-pdf 源代码的文件夹,找到关于 pdfjs-list 的引用文件地址。
- 步骤二 pdfjs-list 源码修改。这里网上很多解决方法都很坑,只是说
node_modules\pdfjs-dist\build\pdf.worker.js
,但是 vue-pdf 使用的是它 es5 这个文件夹下的文件!!!!我没注意一直修改无效!!!!!这就需要我们按照上面的路径去查看源代码引用的具体路径,版本不一样可能都不同,所有还是的得自己去找啊!(
下面就是找到下面的代码注释掉就行,完美解决!if (data.fieldType === "Sig") { // data.fieldValue = null; // this.setFlags(_util.AnnotationFlag.HIDDEN); }
3、在控制台会出现如下警告⚠️(产生主要原因:是有pdf不支持的字体格式,可以通过引入pdf.js的字体来解决该问题):
Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.
当PDF文件中有中文的情况下,在引用pdfjs过程中可能会出现中文不显示问题,在console中会提示如上错误。解决方案就是引入字体UNPKG - pdfjs-dist
4、如果将pdfjs-dist字体包引入静态文件了,cMapUrl:‘../../xxxx/pdfjs-dist/cmaps/’,这个时候还是会报错,其实还是不能解析中文;这个时候引入
CMapReaderFactory
// 中文PDF加载空白引入依赖
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
@Override
// 这里是重点,然后将流数据转换为url,CMapReaderFactory方法在进行处理
src = pdf.createLoadingTask({
url: src,
// cMapUrl: 'https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/',
cMapUrl: '../../assets/pdfjs-dist/cmaps/',
cMapPacked: true,
CMapReaderFactory
})
更多推荐
所有评论(0)