前端PDF预览（vue）

项目需要PDF预览，使用vue-pdf插件

npm引入

npm install vue-pdf --save

因为项目使用的element-ui，需求是要在弹框里预览PDF，所以放在dialog里面

先引入

import pdf from 'vue-pdf';
components:{
    pdf
},

页面引用（dialog弹框省略了）；

//页面顶部按钮
<div class="pdfTitle">
    <el-button size="small" @click="changePdfPage(0)">上一页</el-button>
<!--currentPage当前页数 pageCount总页数-->

    <span>{{currentPage}}/{{pageCount}}</span>
    <el-button size="small" @click="changePdfPage(1)">下一页</el-button>
</div>
<pdf
 :src="pdfUrl"  //pdf地址
  ref="ref"   
  class="pdf" 
  :page="currentPage"   //显示当前页码（也可以不要，上面span标签里面已经做了显示）
  @num-pages="pageCount=$event"   //总页数
  @page-loaded="currentPage=$event"  //一开始加载的页面
  @loaded="loadPdfHandler"> //// 加载事件
</pdf>

data里面定义好上述出现的字段

method方法

//预览
//页面打开预览弹框按钮
preview(row) {  
//createLoadingTask方法，参数为pdf的文件地址，此方法可返回pdf文件的一些参数，例如页码总数，等；会返回一个promise对象；
    this.pdfUrl = pdf.createLoadingTask(this.fileUrl + row.magazinePdfPath);

    this.pdfUrl.then(pdf => {
//拿到pdf的总页码数
        this.pageCount = pdf.numPages;
    }).catch(err => {
          console.log(err)
    });
    this.pdfDialog = true;//弹框开关
},

默认加载第一页

//加载第一页，参数event必传，不然会报错
loadPdfHandler(e) {
    this.currentPage = 1;
},

页码变化

changePdfPage(val) {
    if(val == 0 && this.currentPage > 1) {
        this.currentPage --
    };
    if(val == 1 && this.currentPage < this.pageCount) {
      this.currentPage ++;
    }
},

好了，大功告成。