vue 预览PDF文件

 创建一个vue文件 showContracts.vue 

<template>
  <div>
    <div>
      <el-button size="mini">上一页</el-button>
      <el-button size="mini">下一个</el-button>
    </div>
    <canvas v-for="item in totalPage" :key="item" :id="'the-canvas' + item" class="pdf-content"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
import api from '@/settings'

export default {
  name: 'showContract',
  props: {
    pdfUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      totalPage:[]
    }
  },
  created() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
    let winW = document.documentElement.clientWidth

    // pdf 的 localhost地址是把用来做测试的pdf放在了项目里，实际运用可以用后台返回的线上地址
    let pdfUrl = api.ywgl+'/dist/img/1.pdf'

    let loadingTask = pdfjsLib.getDocument(pdfUrl)

    loadingTask.promise.then(
      pdf => {
        let pageNum = pdf.numPages
        this.totalPage = pageNum
        for (let i = 1; i <= pageNum; i++) {
          pdf.getPage(i).then(page => {
            let viewport = page.getViewport({scale: 1})
            let scale = (winW / viewport.width).toFixed(2)
            let scaledViewport = page.getViewport({scale: 1})
            let canvas = document.getElementById('the-canvas' + i)
            let context = canvas.getContext('2d')
            canvas.height = scaledViewport.height
            canvas.width = scaledViewport.width
            let renderContext = {
              canvasContext: context,
              viewport: scaledViewport
            }
            let renderTask = page.render(renderContext)
            renderTask.promise.then(() => {})
          })
        }
      },
      function (reason) {
        console.error(reason)
      }
    )
  },

  methods: {},
  mounted() {}
}
</script>

在需要页面引入该页面传入pdfUrl参数如PDF的url即可

 <show-contracts :pdfUrl="pdfUrl"></show-contracts>