转载地址
地址一
地址二

先下载

yarn add vue-pdf-signature
或者
npm install --save vue-pdf-signature

使用

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div v-for="(item, index) in links" :key="index" class="pdfdiv">
        <!-- <pdf :src="pdfUrl" v-for="i in numPages" :key="i" :page="i"></pdf> -->
        <pdf :src="item" id='pdf' ref="printPdf" style="display:inline-block;width:100%"></pdf>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pdf from 'vue-pdf-signature'
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'
// import getqueryReceipt from '../services/getqueryReceipt' // 获取url的接口

export default {
  components: {
    pdf
  },
  data() {
    return {
      dialogVisible: false,
      links: [],
      pdfList: []
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.pdfList = []
      this.links = [] // 一定要清空,不然数组会一直添加内容
    },
    newFn() {
      const arr = this.pdfList
      for (var i = 0; i < arr.length; i++) {
        var src1 = arr[i]
        var aa = pdf.createLoadingTask({
          url: src1.link, // url:"",
          cMapPacked: true,
          CMapReaderFactory
        })
        this.links.push(aa)
      }
    },
    qurryPay(row) {
      this.dialogVisible = true
      this.infoCode = row.infoCode
      this.formId = row.loanID
      // getqueryReceipt(this.formID, this.infoCode).then(res => {
      //   if (res.success) {
      //     this.pdfList = res.content
      //     this.newFn()
      //   }
      // })
    }
  }
}
</script>

<style></style>