业务流程
流程如上图。使用vue-pdf组件无法显示完整的合同的内容，所有填充的用户分期数据全都是空。然而单独在浏览器中打开pdf内容又是完整的，百思不得其解。
翻阅了很多资料，有说在组件目录下pdfjsWrapper.js文件中注释掉一行代码annotationLayerElt.style.visibility = 'hidden';。然而亲测并没有效果。
真正能解决的，是要引入CMapReaderFactory.js，同时在方法pdf.createLoadingTask中要传参进去。但这个js，有网友是拿来解决pdf 中文乱码用的。关于这次pdf遇到的状况，具体原因暂不得知，若有人了解望告知。
最后，附上代码。vue-pdf 默认只显示第一页pdf，这边已经实现显示所有pdf的功能。
<template>
<div class="pdf">
<pdf
ref="pdf"
v-for="i in numPages"
:key="i"
:src="pdfUrl"
:page="i">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
name: 'Pdf',
components:{
pdf
},
data() {
return {
contractUrl:'接口获取的pdf url地址',
pdfUrl:'',
numPages:1
}
},
mounted() {
this.pdfTask(this.contractUrl)
},
methods: {
pdfTask(pdfUrl){
var self = this
// 传参 CMapReaderFactory
this.pdfUrl = pdf.createLoadingTask({url: pdfUrl, CMapReaderFactory})
console.log('pdf',this.pdfUrl)
this.pdfUrl.promise.then(pdf => {
self.numPages = pdf.numPages
}).catch((err) => {
console.error('pdf加载失败')
})
},
},
}
</script>
如果引入CMapReaderFactory.js还是无法显示填充内容，那一定是后台生成pdf文件时填充内容的字体格式不对，直接让后台改。不要怂哈哈。
