正文
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:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
}
}
</script>
npm install --save vue-pdf
<template>
<div class="pdf">
ref="pdf"
:src="pdfUrl">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components:{
},
data(){
return {
pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.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的页面总数；
四、应用
单页pdf展示及api使用
可以进行页数切换、pdf旋转、部分打印、全部打印、显示加密pdf功能；
监听当前页面加载，加载进度；
<template>
<div class="pdf">
<div class="pdf-tab">
<div
class="btn-def btn-pre"
@click.stop="prePage">上一页</div>
<div
class="btn-def btn-next"
@click.stop="nextPage">下一页</div>
<div
class="btn-def"
@click.stop="clock">顺时针</div>
<div
class="btn-def"
@click.stop="counterClock">逆时针</div>
<div
class="btn-def"
@click.stop="pdfPrintAll">全部打印</div>
<div
class="btn-def"
@click.stop="pdfPrint">部分打印</div>
</div>
<div>{{pageNum}}/{{pageTotalNum}}</div>
<div>进度：{{loadedRatio}}</div>
<div>页面加载成功: {{curPageNum}}</div>
ref="pdf"
:src="pdfUrl"
:page="pageNum"
:rotate="pageRotate"
@password="password"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum=$event"
@error="pdfError($event)"
@link-clicked="page = $event">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components:{
},
data(){
return {
pdfUrl:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
pageNum:1,
pageTotalNum:1,
pageRotate:0,
// 加载进度
loadedRatio:0,
curPageNum:0,
}
},
mounted: function() {
},
methods: {
prePage(){
var p = this.pageNum
p = p>1?p-1:this.pageTotalNum
this.pageNum = p
},
nextPage(){
var p = this.pageNum
p = p<this.pageTotalNum?p+1:1
this.pageNum = p
},
clock(){
this.pageRotate += 90
},
counterClock(){
this.pageRotate -= 90
},
password(updatePassword, reason) {
updatePassword(prompt('password is "123456"'))
console.log('...reason...')
console.log(reason)
console.log('...reason...')
},
pageLoaded(e){
this.curPageNum = e
},
pdfError(error){
console.error(error)
},
pdfPrintAll(){
this.$refs.pdf.print()
},
pdfPrint(){
this.$refs.pdf.print(100,[1,2])
},
}
}
</script>
效果如下图：
线上demo地址
展示全部pdf
上面的示例只能显示单页的pdf，并且pdf的总页数也只能在pdf加载完成后才能获取。下面介绍createLoadingTask的用法，来显示所有pdf。
<template>
<div class="pdf">
<div class="pdf-tab">
<div
:class="['btn-def',{'btn-active':activeIndex==index}]"
v-for="(item,index) in pdfList"
@click.stop="pdfClick(item.pdfUrl,index)">{{item.title}}</div>
</div>
v-for="i in numPages"
:key="i"
:src="pdfUrl"
:page="i">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components:{
},
data(){
return {
pdfList:[
{
pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-29/1546049718768.pdf",
title:"你好，2019年"
},
{
pdfUrl:"http://file.gp58.com/file/2018-11-14/111405.pdf",
title:"中信证券观点"
},
{
pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf",
title:"12月投资月刊"
},
{
pdfUrl:"https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf",
title:"丰岭资本观点"
},
],
pdfUrl: '',
numPages:1,
activeIndex:0,
}
},
mounted: function() {
this.pdfTask(this.pdfList[0].pdfUrl)
},
methods: {
pdfTask(pdfUrl){
var self = this
var loadingTask = pdf.createLoadingTask(pdfUrl)
loadingTask.then(pdf => {
self.pdfUrl = loadingTask
self.numPages = pdf.numPages
}).catch((err) => {
console.error('pdf加载失败')
})
},
pdfClick(pdfUrl,index){
if(index == this.activeIndex)return
this.activeIndex = index
this.pdfUrl = null
this.pdfTask(pdfUrl)
},
}
}
</script>
效果如下图：
线上demo地址
