最近项目需求需要在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>

只需在组件的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>
<pdf
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:{
pdf
},
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>
<pdf
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:{
pdf
},
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地址

vue中使用vue-pdf插件显示pdf的更多相关文章

  1. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  2. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  3. vue中使用better-scroll滚动条插件

    应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...

  4. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  5. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  6. 在vue中使用ztree树插件

    插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在li ...

  7. Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。

    解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...

  8. vue中的自定义分页插件组件

    介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <di ...

  9. vue中登录模块的插件封装

    一个电商城的项目,场景是:在未登录的情况下点击收藏或者加入购物车等操作,执行一个方法如this.$login()来动态插入登录组件. 第一步:写好关于这个登录弹窗的单文件组件 loginBox.vue ...

随机推荐

  1. Fiddler-修改请求的上行参数

    方法一:对所有的请求打断点 1.rules->automatic Breakpoints->Befor Requests 2.点击选择需要修改的请求 3.选择右侧请求区域的 Inspect ...

  2. JUC - ThreadPoolExecutor

    JUC - ThreadPoolExecutor 创建一个ThreadPoolExecutor ThreadPoolExecutor( int corePoolSize, // 保留在池中的线程数,即 ...

  3. vue学习(1) vue-cli 项目搭建

    vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...

  4. SAP Cloud Platform 上CPI的初始化工作

    SAP Cloud Platform上的CPI tenant,如果没有正确的初始化,试图使用时会遇到如下错误消息: Insufficient scope for this resourceinsuff ...

  5. restfulframework引用多对多外键

    记录一下工作中遇到的问题 最近在写restfulframework,感觉还是很便利的 首先贴一下文档地址 https://www.django-rest-framework.org/api-guide ...

  6. 复盘一篇浅谈KNN的文章

    认识-什么是KNN KNN 即 K-nearest neighbors, 是一个hello world级别, 但被广泛使用的机器学习算法, 中文叫K近邻算法, 是一种基本的分类和回归方法. KNN既可 ...

  7. oracle删除表空间和用户

    步骤一: 删除tablespace(登录对应用户删除表空间) DROP TABLESPACE tablespace_name INCLUDING CONTENTS AND DATAFILES; 步骤二 ...

  8. linux /bin/bash^M: bad interpreter的解决办法

    linux下执行shell脚本时报错:-bash: ./a.sh: /bin/bash^M: bad interpreter: No such file or directory. 原因是window ...

  9. MySQL/MariaDB数据库的视图(VIEW)

     MySQL/MariaDB数据库的视图(VIEW) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.视图概述 1>.什么是视图 视图就是一个虚拟的表,保存有实表的查询结果 ...

  10. 洛谷 P1443 马的遍历题解

    题目链接:https://www.luogu.org/problem/P1443 题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个 ...