vue中使用vue-pdf插件显示pdf
最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法、属性能进行功能扩展。
一、安装
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属性
: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功能;
监听当前页面加载,加载进度;
<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>
效果如下图:
展示全部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>
效果如下图:
vue中使用vue-pdf插件显示pdf的更多相关文章
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Vue中通过Vue.extend动态创建实例
Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...
- vue中使用better-scroll滚动条插件
应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- 在vue中使用ztree树插件
插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在li ...
- Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。
解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...
- vue中的自定义分页插件组件
介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <di ...
- vue中登录模块的插件封装
一个电商城的项目,场景是:在未登录的情况下点击收藏或者加入购物车等操作,执行一个方法如this.$login()来动态插入登录组件. 第一步:写好关于这个登录弹窗的单文件组件 loginBox.vue ...
随机推荐
- Fiddler-修改请求的上行参数
方法一:对所有的请求打断点 1.rules->automatic Breakpoints->Befor Requests 2.点击选择需要修改的请求 3.选择右侧请求区域的 Inspect ...
- JUC - ThreadPoolExecutor
JUC - ThreadPoolExecutor 创建一个ThreadPoolExecutor ThreadPoolExecutor( int corePoolSize, // 保留在池中的线程数,即 ...
- vue学习(1) vue-cli 项目搭建
vue学习(1) vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...
- SAP Cloud Platform 上CPI的初始化工作
SAP Cloud Platform上的CPI tenant,如果没有正确的初始化,试图使用时会遇到如下错误消息: Insufficient scope for this resourceinsuff ...
- restfulframework引用多对多外键
记录一下工作中遇到的问题 最近在写restfulframework,感觉还是很便利的 首先贴一下文档地址 https://www.django-rest-framework.org/api-guide ...
- 复盘一篇浅谈KNN的文章
认识-什么是KNN KNN 即 K-nearest neighbors, 是一个hello world级别, 但被广泛使用的机器学习算法, 中文叫K近邻算法, 是一种基本的分类和回归方法. KNN既可 ...
- oracle删除表空间和用户
步骤一: 删除tablespace(登录对应用户删除表空间) DROP TABLESPACE tablespace_name INCLUDING CONTENTS AND DATAFILES; 步骤二 ...
- linux /bin/bash^M: bad interpreter的解决办法
linux下执行shell脚本时报错:-bash: ./a.sh: /bin/bash^M: bad interpreter: No such file or directory. 原因是window ...
- MySQL/MariaDB数据库的视图(VIEW)
MySQL/MariaDB数据库的视图(VIEW) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.视图概述 1>.什么是视图 视图就是一个虚拟的表,保存有实表的查询结果 ...
- 洛谷 P1443 马的遍历题解
题目链接:https://www.luogu.org/problem/P1443 题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个 ...