vue中使用vue-pdf插件顯示pdf

最近項目需求需要在vue中展示pdf，上網搜索了實現方法，找到vue-pdf這個插件非常好用，並且還有許多方法、屬性能進行功能擴展。

一、安裝

npm install --save vue-pdf

二、基本示例

<template>
<div class="pdf">
  <pdf 
    ref="pdf"
    :src="pdfUrl">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
      }
  }
</script>

只需在組件的src屬性傳入pdf的鏈接就能顯示相應的pdf文件。

三、API

Props屬性

:src^{String/Object}

pdf的鏈接，可以是相對、絕對地址或者是一個pdf的加載任務（后面會講到）；

---

 :page^{Number-default:1}

需要展示pdf的第幾頁；

---

:rotate^{Number-default:0}

pdf的旋轉角度，‘90’的倍數才有效；

Events回調

@password^{(updatePassword,reason)}

updatePassword:函數提示需要輸入的密碼；

reason:提示（'NEED_PASSWORD' or 'INCORRECT_PASSWORD'）；

---

 @progress^Number

pdf的頁面的加載進度，Rang[0,1]；

---

 @page-loaded^Number

pdf某個頁面加載成功回調，number為頁面索引值；

---

 @num-pages^Number

監聽pdf加載，獲取pdf的頁數；

---

 @error^Object

pdf加載失敗回調；

---

 @link-clicked^Number

單機內部鏈接時觸發；

Public methods公共方法

print(dpi,pageList)

調用瀏覽器打印功能；

• dpi打印的分辨率（100）
• pageList需要打印的頁面array

Public static methods靜態方法

createLoadingTask(src)

這個方法創建一個當前pdf的加載任務，可以作為:src使用或者公開的獲取當前pdf的頁面總數；

四、應用

單頁pdf展示及api使用

可以進行頁數切換、pdf旋轉、部分打印、全部打印、顯示加密pdf功能；

監聽當前頁面加載，加載進度；

<template>
<div class="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>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
          pageNum:1,
      pageTotalNum:1,
      pageRotate:0,
      // 加載進度
      loadedRatio:0,
      curPageNum:0,
      }
  },
  mounted: function() {
  },
  methods: {
    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])
    },
  }
}
</script>

效果如下圖：

線上demo地址

展示全部pdf

上面的示例只能顯示單頁的pdf，並且pdf的總頁數也只能在pdf加載完成后才能獲取。下面介紹createLoadingTask的用法，來顯示所有pdf。

<template>
<div class="pdf">
  <div class="pdf-tab">
    <div 
      :class="['btn-def',{'btn-active':activeIndex==index}]"
      v-for="(item,index) in pdfList"
      @click.stop="pdfClick(item.pdfUrl,index)">{{item.title}}</div>
  </div>
  <pdf 
    v-for="i in numPages"
    :key="i"
    :src="pdfUrl"
    :page="i">
  </pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
      pdfList:[
        {
          pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-29/1546049718768.pdf",
          title:"你好，2019年"
        },
        {
          pdfUrl:"http://file.gp58.com/file/2018-11-14/111405.pdf",
          title:"中信證券觀點"
        },
        {
          pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf",
          title:"12月投資月刊"
        },
        {
          pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf",
          title:"豐嶺資本觀點"
        },
      ],
      pdfUrl: '',
      numPages:1,
      activeIndex:0,
      }
  },
  mounted: function() {
    this.pdfTask(this.pdfList[0].pdfUrl)
  },
  methods: {
      pdfTask(pdfUrl){
        var self = this
        var loadingTask = pdf.createLoadingTask(pdfUrl)  
        loadingTask.then(pdf => {
          self.pdfUrl = loadingTask
          self.numPages = pdf.numPages
        }).catch((err) => {
          console.error('pdf加載失敗')
      })
      },
    pdfClick(pdfUrl,index){
      if(index == this.activeIndex)return
      this.activeIndex = index
      this.pdfUrl = null
      this.pdfTask(pdfUrl)
    },
  }
}
</script>

效果如下圖：

線上demo地址