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>

只需在组件的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><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.pageNump = p>1?p-1:this.pageTotalNumthis.pageNum = p},nextPage(){var p = this.pageNump = p<this.pageTotalNum?p+1:1this.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 = thisvar loadingTask = pdf.createLoadingTask(pdfUrl)  loadingTask.then(pdf => {self.pdfUrl = loadingTaskself.numPages = pdf.numPages}).catch((err) => {console.error('pdf加载失败')})},pdfClick(pdfUrl,index){if(index == this.activeIndex)returnthis.activeIndex = indexthis.pdfUrl = nullthis.pdfTask(pdfUrl)},}
}
</script>

效果如下图：

线上demo地址

vue中使用vue-pdf插件显示pdf相关推荐

在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
vue中的 vxe-table表格插件实现树形数据表
一个 PC 端表格组件,大数据表格 vue vxe-table表格 vue vxe-table表格 2022-01-20 11:51·前端开发可以自定义选择引入的模块,减少项目的体积: 多主题,多图 ...
Vue中如何根据svg内容显示图片
概述在写前端项目中,我们免不了需要在页面上显示图片,有的是静态图片,需要直接访问项目内的文件:有的需要从后端接口动态获取图片信息,再在页面上显示. 因为svg图片有:矢量图形,不受像素影响:SVG的 ...
自己解决在Vue中动态渲染图片不显示的问题
乐于助人前言分析思路 1. 绝对路径 2. 相对路径总结本篇文章记录的是自己在 Vue-Cli2 中如何去解决的这个问题,心里路程比较多,所以话比较多哈哈,感谢阅读,大概耗时2分钟前言如上 ...
在vue中使用海康插件实现视频监控视频直播方法二(RTMP流加Flash加swf)
在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf) 第一步用npm装这个几个包 "video.js": "^6.6.0",& ...
vue中使用FullCalendar日历插件
文章目录前言一.FullCalendar兼容二.使用步骤 1.引入库 2.载入使用总结前言因为要实现一个类似任务日历的功能,于是翻看了vue创造的日历组件发现不能符合要求的,所以又找了几个 ...

vue中使用vue-pdf插件显示pdf

vue中使用vue-pdf插件显示pdf相关推荐

最新文章

热门文章