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

1,039 阅读1分钟

问题截图:

百度了很多的资料,很多都说pdfjsWrapper.js文件中注释掉一行代码annotationLayerElt.style.visibility = 'hidden',但是我的问题并没有解决

后来发现,引入CMapReaderFactory.js,并在pdf.createLoadingTask方法中传参。这个方法有人用来解决乱码,不知道我这次情况为什么能解决(估计是因为后台动态填充的时候编码格式不一致吧,望网友赐教) 简单事例代码如下:

import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

methods: {
    // 获取pdf
    getPdf () {
      axios.get(this.$http.adornUrl('/customer/coBasicInfo/agreementTemplate'), {
        responseType: 'blob',
        headers: {
          token: this.$store.state.user.cookie
        }
      }).then(res => {
        let blob = new Blob([res.data], {
          type: 'application/pdf'
        })
        const link = window.URL.createObjectURL(blob)
        this.url = pdf.createLoadingTask({ url: link, CMapReaderFactory })
        this.url.promise.then(pdf => {
          this.numPages = pdf.numPages
        }).catch(err => {
          console.error('pdf加载失败', err)
        })
      })
    },
}