vue-pdf组件的使用

导入：
npm install --save vue-pdf

template代码：

<pdf
  :src="src2" 
  :page="currentPage" 
  @num-pages="pageCount=$event" 
  @page-loaded="currentPage=$event"
  @loaded="loadPdfHandler">
 </pdf> 

如果没有其他需求只需要src指向pdf的路径就可以了

注意！

pdf如果放在本地的话，必须在static文件夹下，如果放在其他文件夹下无法加载。

翻页功能：

<div class="pdf" v-show="fileType === 'pdf'">
   <p class="arrow">
     <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">
     上一页
     </span>
     {{currentPage}} / {{pageCount}}
     <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">
     下一页
     </span>
  </p>
</div>  

methods内容：

       // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },

      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },

data的内容：

        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'pdf', // 文件类型
　　　　　src1: '/static/test1.pdf',
　　　　　src2: '/static/test2.pdf',

效果：