vue-pdf插件实现PDF预览功能_vue pdfpreview

在做的Vue项目中，遇到了要上传文件，其中pdf要实现预览，网上查到vue-pdf插件可实现该功能。实现步骤如下：

1.安装插件

npm install --save vue-pdf

2.简单的demo 完整代码

<template>
  <div>
    <a @click="handlePreview()" alt="查看文件" class=""><a-icon type="eye" /></a>
    <a-modal width='1000px' :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel">
      <pdf 
        ref="pdf"
        :src="url"
      >
        </pdf>
    </a-modal>
    
  </div>
  
</template>
<script>
  
  export default {
    components:{
        pdf
    },
    data(){
      return {
          url:"",
      }
    },
    methods:{
      //查看文件
      handlePreview(){
        let fileUrl='http://10.4.4.83:9999/sys/common/static/temp/1645755049088.pdf';
          this.previewPdfVisible=true;
          this.url=fileUrl;
      },
      
    }
  }
</script>
 
<style>
  
</style>

以上只能展示一页

3.多页展示

<template>
  <div>
    <a @click="handlePreview()" alt="查看文件" class=""><a-icon type="eye" /></a>
    <a-modal width='1000px' :visible="previewPdfVisible" @cancel="handlePdfCancel" @ok="handlePdfCancel">
      <pdf 
        ref="pdf"
        v-for="i in pdfNumPages"
        :key="i"
        :page="i"
        :src="previewPdf">
      >
        </pdf>
    </a-modal>
    
  </div>
  
</template>
<script>
  import pdf from 'vue-pdf';
  export default {
    components:{
        pdf
    },
    data(){
      return {
          previewPdfVisible:false,
          previewPdf:"",
          pdfNumPages: null, // pdf 总页数
      }
    },
    methods:{
      handlePdfCancel(){
        this.previewPdfVisible = false;
      },
      //查看文件
      handlePreview(){
        let fileUrl='http://10.4.4.83:9999/sys/common/static/temp/结算中心_1645755049088.pdf';
          this.previewPdfVisible=true;
          this.previewPdf=fileUrl;
          //计算pdf页码总数
          let loadingTask = pdf.createLoadingTask(this.previewPdf)
          loadingTask.promise.then(pdf => {
            this.pdfNumPages = pdf.numPages
          }).catch(err => {
            console.error('pdf 加载失败', err);
          })
      },
      
    }
  }
</script>
 
<style>
  
</style>