業(yè)務(wù)流程
流程如上圖。使用vue-pdf組件無(wú)法顯示完整的合同的內(nèi)容辆飘，所有填充的用戶分期數(shù)據(jù)全都是空啦辐。然而單獨(dú)在瀏覽器中打開(kāi)pdf內(nèi)容又是完整的谓传，百思不得其解。
翻閱了很多資料芹关，有說(shuō)在組件目錄下pdfjsWrapper.js文件中注釋掉一行代碼annotationLayerElt.style.visibility = 'hidden';续挟。然而親測(cè)并沒(méi)有效果。
真正能解決的侥衬，是要引入CMapReaderFactory.js诗祸，同時(shí)在方法pdf.createLoadingTask中要傳參進(jìn)去。但這個(gè)js轴总，有網(wǎng)友是拿來(lái)解決pdf 中文亂碼用的直颅。關(guān)于這次pdf遇到的狀況，具體原因暫不得知怀樟，若有人了解望告知功偿。
最后，附上代碼往堡。vue-pdf 默認(rèn)只顯示第一頁(yè)pdf械荷，這邊已經(jīng)實(shí)現(xiàn)顯示所有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還是無(wú)法顯示填充內(nèi)容，那一定是后臺(tái)生成pdf文件時(shí)填充內(nèi)容的字體格式不對(duì)吨瞎，直接讓后臺(tái)改痹兜。不要慫哈哈。
