vue配合element 实现在线预览pdf文档

使用插件

npm install --save vue-pdf

<template><div id="app"><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible.sync="dialogVisible" width="30%"><div><pdfclass="yansg"ref="pdf":src="url":page="pageNum":rotate="pageRotate"@progress="loadedRatio = $event"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum = $event"@error="pdfError($event)"@link-clicked="page = $event"></pdf><div class="tools"><bk-button:theme="'default'"type="submit":title="'基础按钮'"@click.stop="prePage"class="mr10">上一页</bk-button><bk-button:theme="'default'"type="submit":title="'基础按钮'"@click.stop="nextPage"class="mr10">下一页</bk-button><span class="page">{{ pageNum }}/{{ pageTotalNum }}</span><!-- <bk-button:theme="'default'"type="submit":title="'基础按钮'"@click.stop="clock"class="mr10">顺时针</bk-button><bk-button:theme="'default'"type="submit":title="'基础按钮'"@click.stop="counterClock"class="mr10">逆时针</bk-button> --></div></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
import pdf from "vue-pdf";
export default {name: "Home",components: {pdf,},data() {return {url: "/24/61177cf1-61eb-4c81-a864-13ef421a19b1.pdf",pageNum: 1,pageTotalNum: 1,pageRotate: 0,// 加载进度loadedRatio: 0,curPageNum: 0,dialogVisible: false,};},mounted: function () {},methods: {// 上一页函数，prePage() {var page = this.pageNum;page = page > 1 ? page - 1 : this.pageTotalNum;this.pageNum = page;},// 下一页函数nextPage() {var page = this.pageNum;page = page < this.pageTotalNum ? page + 1 : 1;this.pageNum = page;},// 页面顺时针翻转90度。clock() {this.pageRotate += 90;},// 页面逆时针翻转90度。counterClock() {this.pageRotate -= 90;},// 页面加载回调函数，其中e为当前页数pageLoaded(e) {this.curPageNum = e;},// 其他的一些回调函数。pdfError(error) {console.error(error);},},
};
</script><style>
.yansg {width: 80%;height: 100%;overflow: hidden;margin: 0 auto;
}
.el-dialog__body{padding: 0 10px !important;text-align: right;
}
</style>

vue配合element 实现在线预览pdf文档相关推荐

加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
vue调用手机浏览器打开pdf_vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法...
目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框.网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受 ...
UNIAPP在线预览PDF文档DCloud插件
UniApp 在线预览PDF&插件使用该实现方式基于pdf.js,使用网页嵌套web-view标签. 插件优点:内容懒加载,可自行决定工具栏内容,@message能监听用户操作,支持H5.安 ...
安卓手机如何在线预览PDF文档
需要当我们上传到服务器上一个PDF文档发,在苹果手机和网页上都能正常的打开,但是一到安卓手机上就会出现下面的问题. 还得需要我们下载查看,无法在线查看,就我这个臭脾气再重要的文件我也不回去下载查看的. ...
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是把WORD文 ...
Android实现在线预览office文档(Word,Pdf,excel,PPT.txt等格式)
1.概述我们都知道,Android原生并没有提供浏览office文档格式的相关Api,在安卓端想要实现在线预览office文档的功能显然很是复杂,我们手机安装QQ浏览器时,在手机打开office文档 ...
web项目使用OpenOffice实现前端在线预览office文档(超详细)
超详细的OpenOffice实现前端在线预览office文档记录最近搞一个数字化共享平台,是一个java web项目,使用框架ssm,其中项目有一个需要在线预览PDF.excle.ppt.word文 ...
渲染预览PDF文档,轻松搞定,这方案真香!
渲染预览PDF文档,轻松搞定,这方案真香! 1.前言 2.列举一些文档预览解决方案: 3.列举一些文档解析生成解决方案: 4.案列赏析 5.准备工作: 6.模板讲解: 7.代码实现: 8.效果图: 9 ...
在线预览word文档
在线预览word文档在线预览word文档 Java 使用wps将word文件转换pdf文件转成PDF 在线预览word(转成pdf)前端展示欢迎来提更好的意见在线预览word文档昨天下午组长 ...

vue配合element 实现在线预览pdf文档

vue配合element 实现在线预览pdf文档相关推荐

最新文章

热门文章