关于vue-pdf无法显示pdf合同填充内容

业务流程

流程如上图。使用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文件时填充内容的字体格式不对，直接让后台改。不要怂哈哈。