關於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>