记录使用插件 vue-pdf

2019独角兽企业重金招聘Python工程师标准>>>

在做公司APP的时候遇到一个展示PDF的功能。查了网上好多资料。决定用vue-pdf。

官网地址：https://www.npmjs.com/package/vue-pdf

 

一、安装

npm install --save vue-pdf

二、基本示例

 

只需在组件的src属性传入pdf的链接就能显示相应的pdf文件。

三、API

Props属性

:srcString/Object

pdf的链接，可以是相对、绝对地址或者是一个pdf的加载任务（后面会讲到）；

---

 :pageNumber-default:1

需要展示pdf的第几页；

---

:rotateNumber-default:0

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

Events回调

@password(updatePassword,reason)

updatePassword:函数提示需要输入的密码；

reason:提示（'NEED_PASSWORD' or 'INCORRECT_PASSWORD'）；

---

 @progressNumber

pdf的页面的加载进度，Rang[0,1]；

---

 @page-loadedNumber

pdf某个页面加载成功回调，number为页面索引值；

---

 @num-pagesNumber

监听pdf加载，获取pdf的页数；

---

 @errorObject

pdf加载失败回调；

---

 @link-clickedNumber

单机内部链接时触发；

Public methods公共方法

print(dpi,pageList)

调用浏览器打印功能；

• dpi打印的分辨率（100）
• pageList需要打印的页面array

Public static methods静态方法

createLoadingTask(src)

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

四、应用

单页pdf展示及api使用

可以进行页数切换、pdf旋转、部分打印、全部打印、显示加密pdf功能；

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

线上demo地址：https://daishengloda.github.io/review/dist/index.html#/pdf

展示全部pdf

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

效果如下图：

线上demo地址： https://daishengloda.github.io/review/dist/index.html#/pdfBasic

转自博客园，地址

https://www.cnblogs.com/lodadssd/p/10297989.html

 

转载于:https://my.oschina.net/lovemiao/blog/3050308