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 ...
随机推荐
- 类选择器与ID选择器的比较
如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...
- nginx-1.12.0安装
1.配置相关环境: yum install -y gcc glibc gcc-c++ zlib pcre-devel openssl-devel rewrite模块需要pcre库 ssl功能需要ope ...
- ora121 tips
1. 900929 - Linux: STORAGE_PARAMETERS_WRONG_SET and "mmap() failed" Solution Increase the ...
- 企业如何避免错误决策?APS系统帮你忙
一家企业不论什么事情都是有一定的决策者们,企业的决策者是对整个企业的兴衰成败主宰者主要责任. 战略一词它源于军事,是指为了获得有利的信息而进行的部署计划,那么现在战略合作也是被广泛的应用到商业的以及生 ...
- JS 小工具 MYSQL WHERE IN条件 去掉换行符(列转行)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- linux中apt-get使用
apt-get简介 在Ubuntu系统中,经常要用到apt-get install指令来安装软件,由于常常需要root权限来操作,所以搭配sudo食用口感更佳,apt-get指令对于安装.卸载.升级软 ...
- CSS选择器知识梳理
<一>CSS选择器结构逻辑图 温馨提示:各位小伙伴,可以把逻辑图下载下来放大,看的比较清除,也可以给我留言,我分享原百度脑图给各位小伙伴. <二>接下来按照结构逻辑图具体讲解各 ...
- Codeforces Round #598 (Div. 3)- E. Yet Another Division Into Teams - 动态规划
Codeforces Round #598 (Div. 3)- E. Yet Another Division Into Teams - 动态规划 [Problem Description] 给你\( ...
- 洛谷 P2921 在农场万圣节Trick or Treat on the Farm题解
题意翻译 题目描述 每年,在威斯康星州,奶牛们都会穿上衣服,收集农夫约翰在N(1<=N<=100,000)个牛棚隔间中留下的糖果,以此来庆祝美国秋天的万圣节. 由于牛棚不太大,FJ通过指定 ...
- 题解 UVa11489
题目大意 多组数据,每组数据给定一个整数字串,两个人每次从中抽数,要求每次剩余的数都是 \(3\) 的倍数,请求出谁会获胜. 分析 由于 \(p-1\) 的因数的倍数在 \(p\) 进制下的各位数字之 ...