直接上代码吧

<div >
  <el-button type="success" size="small" @click="isViewPdf20 = true" >按钮</el-button>
</div>

<el-dialog
  title="预览文件"
  :visible.sync="isViewPdf20"
  :before-close="handleClose"
  :fullscreen="true"
>
  <iframe :src=你要预览pdf的文件的地址 frameborder="0" style="width: 100vw; height: 80vh"></iframe>
</el-dialog>
												


											
vue、Element  点击按钮以弹窗形式预览pdf文件的更多相关文章
	

    
								
  1. fis3+vue+pdf.js制作预览PDF文件或其他
		
    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
    
		
    2. 
						
  2. vue+element 点击按钮后 导致 刷新页面 致url中拼接 ？ 或者拼接参数
		
    https://blog.csdn.net/sinat_37255207/article/details/88917162 element 自己的<el-form></el-form ...
    
		
    3. 
						
  3. vue文件流转换成pdf预览(pdf.js+iframe)
		
    参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端 ...
    
		
    4. 
						
  4. vue 如何点击按钮返回上一页
		
    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
    
		
    5. 
						
  5. Vue实现点击按钮进行文件下载(后端Java)
		
    最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想 ...
    
		
    6. 
						
  6. webapp项目vue框架点击按钮实现微信好友分享，朋友圈分享
		
    当时做这个这个效果真把人给*了,网上能搜到的基本是微信页面的分享,特征是方法是wx.**开头,不适用于app内.思路都是一样的,先调取服务(这里使用plus的内置方法),再发送分享请求 <tem ...
    
		
    7. 
						
  7. Vue 中使用 viewerjs进行本地上传预览图片
		
    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...
    
		
    8. 
						
  8. vue前端静态页面Github Pages线上预览实现
		
    一.前期准备之项目编译 此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址 打包之前修改三个文件 第一步,找到build文件,在webpack.prod. ...
    
		
    9. 
						
  9. vue+element ui 的上传文件使用组件
		
    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. spring-boot 连接数据库（六）
			
    环境 jdk 6 tomcat 6.0.53 sts 4.4.2 maven 3.2.5 mysql 5.7 准备 接下来的数据库操作基于 mysql,所以需要一套可用的 mysql 环境. 引入 j ...
    
			
    2. 
						
  2. Codeforces Educational Codeforces Round 3 E. Minimum spanning tree for each edge　树上倍增
			
    E. Minimum spanning tree for each edge 题目连接: http://www.codeforces.com/contest/609/problem/E Descrip ...
    
			
    3. 
						
  3. 小白简单快速搭建lnmp环境(centos7)
			
    本来想着自己搭建lnmp,由于php包下载不下来因此这次本人使用的lnmp一键包搭建的环境(很遗憾还没有php7.3.5)很详细并且方便快捷网址https://lnmp.org/install.htm ...
    
			
    4. 
						
  4. MySql 多表关系
			
    多表关系 一对一关系 一对一关系是最好理解的一种关系,在数据库建表的时候可以将人表的主键放置与身份证表里面,也可以将身份证表的主键放置于人表里面 一对多关系 班级是1端,学生是多端,结合面向对象的思想 ...
    
			
    5. 
						
  5. Elastic Search中Document的CRUD操作
			
    一. 新增Document在索引中增加文档.在index中增加document.ES有自动识别机制.如果增加的document对应的index不存在.自动创建,如果index存在,type不存在自动创 ...
    
			
    6. 
						
  6. 计算广告CTR预估系列(七)--Facebook经典模型LR+GBDT理论与实践
			
    计算广告CTR预估系列(七)--Facebook经典模型LR+GBDT理论与实践 2018年06月13日 16:38:11 轻春 阅读数 6004更多 分类专栏: 机器学习 机器学习荐货情报局   版 ...
    
			
    7. 
						
  7. Java反射理解（五）-- 方法反射的基本操作
			
    Java反射理解(五)-- 方法反射的基本操作 方法的反射 1. 如何获取某个方法 方法的名称和方法的参数列表才能唯一决定某个方法 2. 方法反射的操作 method.invoke(对象,参数列表)  ...
    
			
    8. 
						
  8. springMvc改造springboot2.0踩坑
			
    1. 支持jsp applicaiton.proerties添加配置 #指定视图解析路径前缀 spring.mvc.view.prefix=/WEB-INF/jsp/ #指定视图解析后缀 spring ...
    
			
    9. 
						
  9. 解决VS2005打开js,css,asp.php等文件,中文都是乱码的问题
			
    用记事本打开可以正常观看但是用VS2005编辑器打开JS,中文确实乱码. 解决办法:在VS 2005 的设置里面选择自动检测Utf-8:“工具”->“选项”->“文本编辑器”->“自 ...
    
			
    10. 
						
  10. ASP.NET 打包发布中没有Visual Studio Installer
			
    环境:win7 64位 : VisualStudio2015 问题描述 创建安装程序时,VisualStudio中没有打包安装程序的Visual Studio Installer功能 解决方法 下载V ...
    
			
    11.