vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
类别:编程学习 浏览量:1293
时间:2022-03-28 13:48:11 vue pdf预览插件
Vue-pdf实现在线预览PDF文件前言
在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现。
安装依赖
npm install --save vue-pdf
相关参数
参数介绍:
- url :pdf 文件的路径,可以是本地路径,也可以是在线路径。
- page: 当前显示的页数,比如第一页page=1
- rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转。
- progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了。
- page-loaded :页面加载成功的回调函数,不咋能用到。
- num-pages :总页数
- error :加载错误的回调
- link-clicked:单机pdf内的链接会触发。
- print 这个是打印函数。 注意:谷歌浏览器会出现乱码,这个和字体有关系。
实现
<template> <li> <el-row> <el-button @click="onPreview" size="small">预览</el-button> </el-row> <el-dialog title="预览合同附件" :visible.sync="viewVisible" center width="60%" @close='closePreview'> <el-row :gutter="20"> <span>共{{pageCount}}页, 当前第 {{pdfPage}} 页 </span> <el-button type="text" size="mini" @click.stop="previousPage">上一页</el-button> <el-button type="text" size="mini" @click.stop="nextPage">下一页</el-button> </el-row> <li> <pdf :src="src" :page="pdfPage" @num-pages="pageCount = $event" @page-loaded="pdfPage = $event" style="display: inline-block; width: 100%"></pdf> </li> </el-dialog> </li> </template> <script> import pdf from 'vue-pdf' import store from '@/store/' export default { components:{ pdf }, data(){ return { viewVisible: false, src: null, pdfPage : 1, pageCount: 0, token: store.getters.access_token, } }, methods:{ onPreview(){ this.src = pdf.createLoadingTask({ url: 'http://localhost:8082/file/demo.pdf', httpHeaders: {Authorization:'Bearer '+ this.token} }); this.src.promise.then(pdf => { this.viewVisible = true; }); }, closePreview(){ this.pdfPage = 1; }, previousPage(){ let p = this.pdfPage p = p > 1 ? p-1 : this.pageCount this.pdfPage = p }, nextPage(){ let p = this.pdfPage p = p < this.pageCount ? p+1 : 1 this.pdfPage = p } } } </script>
效果
注意点
1、URL
url为文件地址路径
this.src = pdf.createLoadingTask({ url: 'http://localhost:8082/file/demo.pdf', });
2、设置请求头
可以通过httpHeaders来设置token等参数
httpHeaders: {Authorization:'Bearer '+ this.token}
3、src
这点比较重要,网上很多帖子都是这样的
this.src.then(pdf => { this.viewVisible = true; })
会报错 TypeError: this.src.then is not a function
TypeError: this.src.then is not a function at VueComponent.onPreview (index.vue?6ced:241) at click (index.vue?aaff:261) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888) at VueComponent.handleClick (element-ui.common.js?5c96:9413) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179) at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
正确的是这样的
this.src.promise.then(pdf => { this.viewVisible = true; });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- mongovue的使用
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue父组件怎么用子组件的数据(Vue使用v-model封装el-pagination组件的全过程)
- vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue 设置头部可以左右滑动(vue实现左右滑动效果实例代码)
- vue身份验证(详解vue身份认证管理和租户管理)
- vue中的ref(Vue3.0中Ref与Reactive的区别示例详析)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- vue慢动作怎么操作(vue开发之moment的介绍与使用)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue-router底层实现原理(vue-router history模式服务器端配置过程记录)
- 郭麒麟(郭麒麟)
- 古人十句 戒骄 名言,醍醐灌顶,受益匪浅(古人十句戒骄名言)
- 《道德经》:功成不局,泰而不骄(道德经:功成不局)
- 每日一典 过江之鲫(每日一典过江之鲫)
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
热门推荐
- reacthooks基础使用(React 小技巧教你如何摆脱hooks依赖烦恼)
- sql server查询操作怎么做(sqlserver分页查询处理方法小结)
- win7安装安卓模拟器(腾讯云服务器怎么安装安卓模拟器 可以安装安卓模拟器吗)
- HttpWebResponse类的属性和方法
- linux怎么恢复删除的数据(Linux利用lsof/extundelete工具恢复误删除的文件或目录)
- 什么是mime编码(Mime类型与文件后缀对照表)
- css3背景渐变动画效果(css3制作的背景渐变动画效果)
- sqlserver提供的内置函数(Sqlserver 自定义函数 Function使用介绍)
- js移动端菜上下滑动效果(JS实现移动端上下滑动一次一屏)
- django mysql设置(Django框架使用mysql视图操作示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9