<el-button type="primary"
           size="mini"
           @click="getPDFLoadFile">预 览</el-button>
<el-button type="primary"
            size="mini"
            @click="getDownloadPdf">导 出</el-button>
<el-button type="primary"
           size="mini"
           @click="getPrintPdf">打 印</el-button>
           
<div class="pdf-container f-col" ref="report_pdf">
  <!--此处根据pdf的页数动态生成相应数量的canvas画布-->
  <canvas v-for="pageIndex in pdfPages"
          :id="`pdf-canvas-`+pageIndex"
          :key="pageIndex"></canvas>
</div>

//安装依赖
npm i print-js

//导入依赖
<script>
import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js'
export default {
  data () {
    return {
      pdfUrl: '',
      pdfDoc: '',
      pdfPages: 0,
      pdfScale: 1.0
    }
  }
}

methods:{
  //获取PDF报表
  async getPDFLoadFile () {
    let params = this.reportForm
    let item = this.currentReport
    let url = await api.getReportPDF(item.id, params);
    this.pdfUrl = url
    PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
    let urlPdf = window.URL.createObjectURL(new Blob([url]))
    const loadingTask = PdfJs.getDocument(urlPdf)
    loadingTask.promise.then(pdf => {
      this.pdfDoc = pdf
      this.pdfPages = this.pdfDoc.numPages
      this.$nextTick(() => {
        this.renderPage(1) // 表示渲染第 1 页
      })
    })
  },

  //PDF报表页面渲染
  renderPage (num) {
    this.pdfDoc.getPage(num).then(page => {
      const canvasId = 'pdf-canvas-' + num // 第num个canvas画布的id
      const canvas = document.getElementById(canvasId)
      const ctx = canvas.getContext('2d')
      const dpr = window.devicePixelRatio || 1
      const viewport = page.getViewport({ scale: this.pdfScale })
      canvas.width = viewport.width * dpr
      canvas.height = viewport.height * dpr
      canvas.style.width = viewport.width + 'px'
      canvas.style.height = viewport.height + 'px'
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }
      page.render(renderContext)
      // 在第num页渲染完毕后，递归调用renderPage方法，去渲染下一页，直到所有页面渲染完毕为止
      if (num < this.pdfPages) {
        this.renderPage(num + 1)
      }
    })
  },

  //下载pdf文件流
  getDownloadPdf () {
    let item = this.currentReport
    const blob = new Blob([this.pdfUrl], { type: 'application/pdf' })
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = item.name + '.pdf'
    document.body.appendChild(downloadElement)
    downloadElement.click()
    document.body.removeChild(downloadElement)
    window.URL.revokeObjectURL(href)
  },

  //打印pdf文件流
  getPrintPdf () {
    const blob = new Blob([this.pdfUrl], { type: 'application/pdf' })
    const url = window.URL.createObjectURL(blob)
    const iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    iframe.src = url
    document.body.appendChild(iframe)
    iframe.onload = function () {
      console.log(iframe.contentWindow);
      iframe.contentWindow.print()
      window.URL.revokeObjectURL(url)
      // document.body.removeChild(iframe)
    }
  },
}
</script>