使用vue-pdf预览pdf文件

安装 ：npm install pdfjs-dist

<template>
  <div>
      <el-card ref="pdf" class="file-card" shadow="never" :body-style="{ padding: '0px' }" >
        <canvas v-for="page in numPages" :ref="'canvas' + page" :key="page"></canvas>
      </el-card>
  </div>
</template>
 
<script>
import PDFJS from 'pdfjs-dist'
export default {
  data () {
    return {
      pdfDoc: null,
      numPages: 0
    }
  },
  methods: {
    renderPage (num) {
      this.pdfDoc.getPage(num)
        .then((page) => {
          const canvas = this.$refs['canvas' + num][0]
          // const canvas = document.getElementById('canvas' + num)
          const ctx = canvas.getContext('2d')
          var viewport = page.getViewport({ scale: 2 })
          const viewportElem = document.querySelector('meta[name=viewport]')
          viewportElem.setAttribute('content', 'width=device-width')
          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
          canvas.height = viewport.height
          canvas.style.width = '100%' // 画布的框架大小
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport
          }
          page.render(renderContext)
          if (this.numPages > num) {
            this.renderPage(num + 1)
          }
        })
    }
  },
  created () {
    const that = this
 
    PDFJS.disableWorker = true
    PDFJS.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.js'
    PDFJS.getDocument({
      url: '地址',
      cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
      cMapPacked: true
    }).promise.then((pdf) => {
      this.pdfDoc = pdf
      this.numPages = this.pdfDoc.numPages
      that.$nextTick(() => {
        that.loading = false
        that.renderPage(1)
      })
    })
  }
}
</script>
 
<style lang="scss" scoped>
 
.file-card{
  border: none;
  width:100%;
  height: 100%;
  overflow:auto;
}
</style>