vue中查看pdf文件

安装插件vue-pdf
npm install vue-pdf --save
在vue中使用

import pdf from 'vue-pdf'
data() {
  return {
    src: '',
    numPages: undefined,
    loadNum: 0
  }
},
const loadingTask = pdf.createLoadingTask(this.pdfUrl)
loadingTask.promise.then(pdf => {
  this.numPages = pdf.numPages
}).catch(err => {
  console.error('pdf 加载失败', err)
})
methods: {
  pdfLoad(val) {
    this.loadNum = this.loadNum + (val === 1 ? val : 0)
    if (this.loadNum === this.numPages) {
      this.loading = false
    }
  },
  }
  
  
  <template>
  <div v-loading="loading" class="drawer-body">
  <div :style="{height: loading ? '200px' : 'auto', overflow: loading ? 'hidden' : '' }">
    <pdf
      v-for="i in numPages"
      ref="pdf"
      :key="i"
      :src="formData.pdfUrl"
      :page="i"
      @progress="pdfLoad($event)"
    />
  </div>
</div>
  </template>

解决电子章不显示问题
找到
下的pdf.worker.js注释掉

// _this3.setFlags(_util.AnnotationFlag.HIDDEN);

打补丁
安装patch-package
npm i patch-package --save-dev
修改package.json，在scripts下新增命令postinstall:
"postinstall": "patch-package"
执行命令：
npx patch-package 修改的文件夹名字 此处文件夹名字指node_modules中下的文件夹名字如：
npx patch-package pdfjs-dist 这里的 pdfjs-dist 就是我们修改的文件的主文件夹名
命令执行结束后查看 根目录下是否生成了 patches 文件夹 且下方有如图的文件