vue-pdf使用demo
2023-06-13 09:14:43 时间
<template>
<div class="moduleIntro">
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left" size="small" @click="prePage">上一页</el-button>
<el-button type="primary" size="small" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>
<div style="margin-top: 10px; color: #409EFF; text-align: center">{{ currentPage }} / {{ pageCountNum }}</div>
<pdf
:page="currentPage"
:src="pdfUrl"
@progress="loadedRatio = $event"
@num-pages="pageCountNum = $event"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'moduleIntro',
components: {
pdf
},
data(){
return{
currentPage: 1,
pageCountNum: 0, //# 总页数
loadedRatio: 0, //# 当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了
pdfUrl:'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
}
},
methods:{
// 上一页
prePage() {
let page = this.currentPage
page = page > 1 ? page - 1 : this.pageCountNum
this.currentPage = page
},
// 下一页
nextPage() {
let page = this.currentPage
page = page < this.pageCountNum ? page + 1 : 1
this.currentPage = page
}
}
}
</script>
相关文章
- vue相关的面试题应该怎么答
- Vue之Promise
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue前端项目-主页布局-左侧导航菜单(静态)[通俗易懂]
- PDF to word for Mac(pdf转word转换器)v4.3.4激活版
- Vue.js – 引入外部 JS 文件
- springboot和vue交互产生跨域问题的解决办法(后端解决方法)
- 免费PDF阅读器 Adobe Acrobat Reader DC 多国语言版-pdf编辑器
- vue.js客服系统实时聊天项目开发(七)ES6模板字符串进行字符串变量内嵌拼接
- PDF Expert for mac(pdf编辑工具) v3.0.37(910)中文激活版
- Linux系统编程:从基础到实践的PDF手册(linux系统编程pdf)
- 阅读器Linux环境下安装PDF阅读器指南(在linux下安装pdf)
- 文件分布式存储Redis实现PDF文件的分布式存储(redis实现pdf)
- Linux技巧:实现最佳计算效率的PDF指南(linux技巧pdf)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Linux轻松打开PDF文件(linux下打开pdf)
- MySQL5.7中的PDF文档使用指南(mysql5.7pdf)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- 如何在Linux上安装PDF阅读器(linux安装pdf)
- MySQL高性能:从PDF走向实现(mysql高性能pdf)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue应用中部署Redis(vue中使用redis)
- Redis高级教程PDF打造高效存储系统(redis高级教程pdf)
- 让你快速掌握Oracle的PDF教程(oracle pdf教程)