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

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

1、安裝

npm install --save vue-pdf

2、基本示例

<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文件。

3、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的頁面總數；

4、應用

單頁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地址