VUE实现PDF在线阅读

1、安装npm

npm install --save vue-pdf

2、HTML部分

<div v-if="dataForm.pdfUrl !== '' & dataForm.pdfUrl !== null & dataForm.pdfUrl !== undefined"><div class="pdf"><pdf :src="pdfOption.src":page="pdfOption.currentPage"@num-pages="pdfOption.pageCount=$event"@page-loaded="pdfOption.currentPage=$event"@loaded="loadPdfHandler"></pdf></div><div class="text-center"><el-button @click="changePdfPage(0)" size="small" :disabled="pdfOption.currentPage == 1">上一页</el-button><el-button @click="dialogVisible = false" size="small" disabled>单前第{{pdfOption.currentPage}}页，共{{pdfOption.pageCount}}页</el-button><el-button @click="changePdfPage(1)" size="small" :disabled="pdfOption.currentPage==pdfOption.pageCount">下一页</el-button></div>
</div>

3、JS部分

<script>
import pdf from 'vue-pdf'
export default {data () {return {// pdf 数据pdfOption: {currentPage: 0,pageCount: 0,fileType: 'pdf',src: ''}}},methods: {// 获取文章详细getInfo () {this.$http.get(`/zs/zscms/getArticleDetailByArticleId?id=${this.dataForm.id}`).then(({ data: res }) => {this.dataForm = {...this.dataForm,...res}this.pdfOption.src = res.pdfUrl}).catch(() => {})},// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页changePdfPage (val) {if (val === 0 && this.pdfOption.currentPage > 1) {this.pdfOption.currentPage--}if (val === 1 && this.pdfOption.currentPage < this.pdfOption.pageCount) {this.pdfOption.currentPage++}},// pdf加载时loadPdfHandler (e) {this.pdfOption.currentPage = 1}},created () {if (this.$route.query.id === undefined) {this.$router.push({ path: '/index' })} else {this.dataForm.id = this.$route.query.idthis.getInfo()}document.title = '文章详细'},components: {pdf}
}
</script>

VUE实现PDF在线阅读相关推荐

nodejs+vue+elementui图书在线阅读网站系统express
在线阅读系统前端技术:nodejs+vue+elementui是将在线阅读管理系统功能模块主要分为管理员模块.管理员添加读者管理.图书信息管理,出版社管理.我的收藏管理等操作本系统结合计算机系统的结 ...
JAVA常用API或编程工具003--实现pdf在线阅读功能之pdf.js
pdf.js简介 PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品.简单说就是一个 PDF 解析器.运用HTML5JavaScript(即pdf.js仅使用安全的w ...
java pdf在线阅读插件_JAVA实现在线查看PDF和office文档
一个项目中要做一个在线预览附件(和百度文库差不多)的小功能点,楼主在开发过程中踩了很多坑的同时也总结了一些方法,仅供广大猿友参考,那么要实现这个小功能,目前主要是有如下3种可行的实现方式,下面先说实现 ...
python实践pdf在线阅读_Python机器学习实践指南 PDF高清完整版
Python机器学习实践指南 PDF高清完整版作者: 库姆斯 (Alexander T.Combs) 出品方: 异步社区原作名: Python Machine Learning Blueprint ...
憋个大招！高性能mysql第四版pdf在线阅读
纯手打"RocketMQ笔记" 第一节:RocketMQ介绍 1.1 核心概念(主题.生产者.消费者.消息) 1.2 RocketMQ的设计理念和目标(设计理念.设计目标) 第二节 ...
pdf怎么在线阅读？一键查阅并不难
PDF格式的文件已经成为现代生活中不可或缺的一部分,无论是学术论文.电子书.工作文件还是表格,都有可能以PDF格式出现.然而,为了读取这些文件,我们需要安装PDF阅读器,这在某些情况下可能会带来不便. ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
PDF格式的“在线阅读”和“下载”
产生背景: 一个需求,用户可在线阅读PDF,也可下载到本地.听需求来源说人家的网站上的可以做,问我们能做吗,需要这个功能,就要来了网址,看看页面. 问题:上传PDF文件后,发现访问地址在浏览器上打开, ...
python程序设计从基础到开发电子书_Python核心编程从入门到开发实战(pdf+txt+epub+azw3+mobi电子书在线阅读下载)...
作者:朱红庆格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT 内容简介: 本书以学会.用好 Python 语言进行软件编程为目标,不仅讲解了基本概念.数据类型.变量.运算符. ...

VUE实现PDF在线阅读

VUE实现PDF在线阅读相关推荐

最新文章

热门文章