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:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.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)

單機內部鏈接時觸發；

線上demo

轉載於:https://www.cnblogs.com/lodadssd/p/10297989.html