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

最近项目需求需要在vue中展示pdf，上网搜索了实现方法，找到vue-pdf这个插件非常好用，并且还有许多方法、属性能进行功能扩展。

一、安装

npm install --save vue-pdf

二、基本示例

只需在组件的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功能；

监听当前页面加载，加载进度；

效果如下图：

线上demo地址

展示全部pdf

上面的示例只能显示单页的pdf，并且pdf的总页数也只能在pdf加载完成后才能获取。下面介绍createLoadingTask的用法，来显示所有pdf。

效果如下图：

线上demo地址

 

转载于:https://www.cnblogs.com/lodadssd/p/10297989.html