在管理系统中，有很多需要预览文件的操作，既方便用户查看又可以不用打开新的页面，我发现一个不错的方法，记录一下

<el-dialog title="" :visible.sync="dialogVisibleFdf" width="1000px" top="0">

      <iframe

        :src="iframeUrl"

        style="height: calc(100vh - 97px);width:100%; frameborder=no"

        frameborder="no"

        border="0"

        marginWidth="0"

        marginHeight="0"

        scrolling="yes"

      >

      </iframe>

    </el-dialog>

配合element的弹窗嵌套iframe的使用

注释：　

dialogVisibleFdf：打开弹窗的布尔值

iframeUrl：文件的线上地址
高度可以配合自己的业务进行适当的调整


打开的样子大概是这个样子，看起来简便一点


 
												


											
今天记录一下管理系统中预览pdf的方法的更多相关文章
	

    
						
  1. IOS 预览pdf,word文档的集中方式
		
    在iPhone中可以很方便的预览文档文件,如:pdf.word等等,这篇文章将以PDF为例.介绍三种预览PDF的方式,又分别从本地pdf文档和网络上的pdf文档进行对比. 预览本地PDF文档: 1.使 ...
    
		
    2. 
						
  2. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
		
    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
    
		
    3. 
						
  3. #网页中动态嵌入PDF文件/在线预览PDF内容#
		
    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
    
		
    4. 
						
  4. fis3+vue+pdf.js制作预览PDF文件或其他
		
    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
    
		
    5. 
						
  5. 前端实现在线预览pdf、word、xls、ppt等文件
		
    最近在做一个公司的资源管理系统,一些知识小记一下. 1.前端实现pdf文件在线预览功能 方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下 ...
    
		
    6. 
						
  6. FlexPaper+SWFTool+操作类=在线预览PDF
		
    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
    
		
    7. 
						
  7. [pdf.js]预览pdf时，中文名称乱码的问题
		
    在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" chars ...
    
		
    8. 
						
  8. 在线预览PDF
		
    FlexPaper+SWFTool+操作类=在线预览PDF   引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf ...
    
		
    9. 
						
  9. FlexPaper+SWFTool+操作类=在线预览PDF(转)
		
    引言 由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
    
		
    10. 
						
  10. WEB在线预览PDF
		
    这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. redis的主从复制master/slaver
			
    什么是Redis的复制 ​ 就是我们常说的主从复制,主机数据更新后根据配置和策略,自动同步到备机的master/slaver机制,Master以写为主,Slave以读为主. 复制原理 Slave启动成 ...
    
			
    2. 
						
  2. idea高效实用快捷键【待补充】
			
    1.快捷键 ctrl+alt+L代码格式化 2.快捷键 ctrl+h查看hierarchy,只能查看向上向下继承关系,而不能看实现了哪些接口. 3,选中右键--Diagram可以查看实现了哪些接口 4 ...
    
			
    3. 
						
  3. 一文彻底弄懂Spring IOC 依赖注入
			
    Spring IOC(Inversion of Control,控制反转)依赖注入是 Spring 框架的核心特性之一,旨在实现对象之间的松耦合,提升代码的可维护性.可测试性和可扩展性.下面我们将从以 ...
    
			
    4. 
						
  4. 组装一台100TB全闪存100G光纤网络海景房幻彩RGB文件服务器【翼王】
			
    视频地址: https://www.youtube.com/watch?v=lzPSIzbYrlU
    
			
    5. 
						
  5. 一文彻底弄懂JUC工具包的CountDownLatch的设计理念与底层原理
			
    CountDownLatch 是 Java 并发包(java.util.concurrent)中的一个同步辅助类,它允许一个或多个线程等待一组操作完成. 一.设计理念 CountDownLatch 是 ...
    
			
    6. 
						
  6. 2025年前端面试准备vue篇
			
      1.VUE的声明周期有哪些及每个生命周期做了什么 beforeCreate: 是new Vue() 之后触发的第一个钩子,data,methods,computed 以及watch 上的数据和方法 ...
    
			
    7. 
						
  7. Element UI 表格排序所有页
			
    Element UI 表格排序只排了当前页,解决方案如下: 定义方法: /** 比较 * @param {string} propertyName 属性值 * @param {string} sort ...
    
			
    8. 
						
  8. manim边做边学--圆柱体
			
    Cylinder是Manim中用于创建圆柱体对象的类. Cylinder类在制作数学.物理或工程领域的动画时,可用于以下的场景中: 演示几何概念:使用Cylinder类创建圆柱体,并通过改变其参数和方 ...
    
			
    9. 
						
  9. 优化简历的开源工具「GitHub 热点速览」
			
    有读者留言问我是不是"跑路"了,上周没发「GitHub 热点速览」是因为在忙于编写<HelloGitHub 月刊>.这不,我带着诚意满满的开源项目又回来啦!首先要分享一 ...
    
			
    10. 
						
  10. uni-app 主题切换
			
    1.前言 功能介绍:提供个性化的展示方案给用户,用户可以选择喜欢的主题色,让App使用该主题色进行渲染 功能实现:主要分为2个模块,一,选择主题色并存储,二,读取选择的主题色,使用该颜色对部分内容进行 ...
    
			
    11.