Vue 实现pdf文档预览（vue-pdf插件）

步骤

1. 安装依赖

npm install --save vue-pdf

2. 在需要的页面，和定义组件一样那种 引入、注册，使用插件

import pdf from 'vue-pdf'

components:{
      pdf
},

export default {
    data(){
      return {
            numPages:0,
            pdfSrc:"",

        }
    }
}

3.页面里使用

<pdf 
    v-for="(item,index) in numPages" 
    :key="item" 
    :src="pdfSrc" 
    :page="item" 
    ref="pdf">
</pdf>

4.触发获取PDF的方法

getPdf(item) {
        this.pdfSrc = ""
        let p = {}
        axios({
          url:'',
          method:"post",
          params:p,
          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
          responseType: 'blob',
        }).then(res=>{
          const blob = new Blob([res.data],{
            type:"application/pdf;charset=utf-8"
          })
          this.pdfSrc = window.URL.createObjectURL(blob)
          let loadignTask = pdf.createLoadingTask(this.pdfSrc)
          loadignTask.promise.then(pdf=>{
            this.numPages = pdf.numPages
          })
        }).catch(e => {
            this.$message({
              message:'查看预览失败',
              type:'error'
            })
        })
 },