PDF.js在页面的简单使用

安装和导入

npm install --save vue-pdf

导入模块

import pdf from "vue-pdf";

导入pdf组件

components: {
    pdf,
  },

HTML

<div #="pdf">
  <div class="pdf-tab">
    <div 
      class="btn-def btn-pre"
      @click.stop="prePage">上一页</div>
    <div 
      class="btn-def btn-next"
      @click.stop="nextPage">下一页</div>
    <div 
      class="btn-def"
      @click.stop="clock">顺时针</div>
    <div 
      class="btn-def"
      @click.stop="counterClock">逆时针</div>
    <div 
      class="btn-def"
      @click.stop="pdfPrintAll">全部打印</div>
    <div 
      class="btn-def"
      @click.stop="pdfPrint">部分打印</div>
  </div>
  <div>{{pageNum}}/{{pageTotalNum}}</div>
  <div>进度：{{loadedRatio}}</div>
  <div>页面加载成功: {{curPageNum}}</div>
  <pdf 
    ref="pdf"
    :src="pdfUrl"
    :page="pageNum"
    :rotate="pageRotate"
    @password="password"
    @progress="loadedRatio = $event"
    @page-loaded="pageLoaded($event)"
    @num-pages="pageTotalNum=$event" 
    @error="pdfError($event)"
    @link-clicked="page = $event">
  </pdf>
</div>

data变量

     pdfUrl:"xxx.pdf",//pdf地址
      pageNum:1,
      pageTotalNum:1,
      pageRotate:0,
      // 加载进度
      loadedRatio:0,
      curPageNum:0,
      }

js

  prePage(){
      var p = this.pageNum
      p = p>1?p-1:this.pageTotalNum
      this.pageNum = p
    },
    nextPage(){
      var p = this.pageNum
      p = p<this.pageTotalNum?p+1:1
      this.pageNum = p
    },
    clock(){
      this.pageRotate += 90 
    },
    counterClock(){
      this.pageRotate -= 90 
    },
    password(updatePassword, reason) {
      updatePassword(prompt('password is "123456"'))
      console.log('...reason...')
      console.log(reason)
      console.log('...reason...')
    },
    pageLoaded(e){
      this.curPageNum = e
    },
    pdfError(error){
      console.error(error)
    },
    pdfPrintAll(){
      this.$refs.pdf.print()
    },
    pdfPrint(){
      this.$refs.pdf.print(100,[1,2])
    },