最近项目需求需要在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. IOWebSocketChannel.connect handle errors

    https://github.com/dart-lang/web_socket_channel/issues/38 yes, my workaround is to create a WebSocke ...

  2. JavaScript原型链以及Object,Function之间的关系

    JavaScript里任何东西都是对象,任何一个对象内部都有另一个对象叫__proto__,即原型,它可以包含任何东西让对象继承.当然__proto__本身也是一个对象,它自己也有自己的__proto ...

  3. html解决空格显示问题

    在前端里面,大家都知道,html中输入空格或换行是识别不了是空格的,但是有时候需要实现,那么该如何解决呢?主要有以下几个方面: 1:常用的转义:  2:使用全角拼音,然后输入空格也可实现 3:用标签 ...

  4. python day 15: IO多路复用,socketserver源码培析,

    目录 python day 15 1. IO多路复用 2. socketserver源码分析 python day 15 2019/10/20 学习资料来自老男孩教育 1. IO多路复用 ''' I/ ...

  5. 关于 Safari 浏览器不支持 location [ window.location.href window.open()] 跳转问题的解决方案

    最近在做项目时,碰到 safari 浏览器不支持location跳转问题,针对此问题,可以通过 js 模拟点击时间来解决,代码如下: <!DOCTYPE HTML> <html la ...

  6. JAVA基础之JavaEE与MVC

    所谓的架构.模式都是方便开发和查看的,分工明确的,理解每层的具体的意义! 一.JavaEE: 1.Java EE,Java 平台企业版(Java Platform Enterprise Edition ...

  7. JAVA基础之HttpServletResponse响应

    用户在客户端输入网址(虚拟路径)时,开始发送一个HTTP请求(请求行.请求头.请求体)至服务器.服务器内的Tomcat引擎会解析请求的地址,去找XML文件,然后根据虚拟路径找Servlet的真实路径, ...

  8. JavaScript变量存储浅析(一)

    Hello! 上一篇关于JS中函数传参(http://www.cnblogs.com/souvenir/p/4969092.html)的介绍中提到了JS的另外一个基本概念:JS变量存储, 今天我们就用 ...

  9. sqlserver 保存 立方米(m³)

    转载来源:https://bbs.csdn.net/topics/370186797 解决方案:在前面加 N,如:N'm³' 案例: create table tbn(name nvarchar(10 ...

  10. Web前端之【 iframe 】

    iframe基本用法 1.最基本的用法 iframe 标签指定 src <iframe src="demo_iframe_sandbox.htm"></ifram ...