项目需求需要在vue中展示pdf,vue-pdf这个插件非常好用,并且还有许多方法、属性能进行功能扩展。

注意:vue-pdf 不支持显示签名,需要显示签名可以用vue-pdf-sign
一, 安装依赖

  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)

单机内部链接时触发;
单机内部链接时触发;

Public methods公共方法
print(dpi,pageList)

调用浏览器打印功能;

dpi打印的分辨率(100)
pageList需要打印的页面array
Public static methods静态方法
createLoadingTask(src)

这个方法创建一个当前pdf的加载任务,可以作为:src使用或者公开的获取当前pdf的页面总数;

标签: none

添加新评论