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

项目需求须要在vue中展现pdf，vue-pdf这个插件很是好用，而且还有许多方法、属性能进行功能扩展。html

一, 安装依赖vue

　　npm install --save vue-pdfgit

二, 基本示例github

<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)npm

pdf的连接，能够是相对、绝对地址或者是一个pdf的加载任务函数

:page (Number-default:1)性能

须要展现pdf的第几页；url

:rotate (Number-default:0)spa

pdf的旋转角度，‘90’的倍数才有效；.net

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