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

<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. 使用 VSCode 远程连接的 SSH 权限问题及解决方案
			
    在使用 VSCode 远程 SSH 连接时,可能会遇到文件权限问题导致连接失败的情况.本文将详细记录如何为 SSH 配置文件(config)和私钥文件(id_rsa)正确设置权限,从而解决 VSCod ...
    
			
    2. 
						
  2. vite 设置网络代理
			
    参考文档:vite 官网.node-http-proxy 完整示例: export default defineConfig({ server: { proxy: { // 字符串简写写法 '/foo ...
    
			
    3. 
						
  3. rqt的安装及详细介绍
			
    1. 安装 安装极其简单,不多介绍,直接上命令:Melodic: sudo apt-get install ros-melodic-rqt sudo apt-get install ros-melod ...
    
			
    4. 
						
  4. CSS:Transform属性
			
    本文将深入探讨css动画中transform属性,这是一种强大的工具,可以实现元素的旋转.缩放.移动和倾斜等效果.本文将通过详细的解释和实际案例,帮助你掌握transform属性的使用方法来增强你的网 ...
    
			
    5. 
						
  5. Proteus中单片机IO口外接LED输出低电平时，引脚却一直保持高电平的问题（已解决）
			
    前言 一个排阻接八个 LED,方便又省事,但出现了P1端口输出低电平后,仿真引脚却一直显示红色保持高电平不变,用电压表测量显示 2V 左右. 这是仿真的问题,在用开发板时是不会遇到的,为了仿真的显示效 ...
    
			
    6. 
						
  6. Issac_GYM重要过程记录
			
    1 下载相关文件 进入github中下载相关的文件 https://github.com/leggedrobotics/legged_gym 2 加载自己绘制的URTL文件 这个链接用来下载宇树的Go ...
    
			
    7. 
						
  7. web上线部署系统 Walle
			
    Walle瓦力是基于git和rsync实现的一个web部署系统工具. 用户分身份注册.登录 开发者发起上线任务申请 管理者审核上线任务 支持多项目部署 快速回滚 部署前准备任务(前置检查) 代码检出后 ...
    
			
    8. 
						
  8. SQL Server 数据太多如何优化
			
    大家好,我是 V 哥.讲了很多数据库,有小伙伴说,SQL Server 也讲一讲啊,好吧,V 哥做个听话的门童,今天要聊一聊 SQL Server. 在 SQL Server 中,当数据量增大时,数据 ...
    
			
    9. 
						
  9. 基于Java+SpringBoot心理测评心理测试系统功能实现三
			
    一.前言介绍: 1.1 项目摘要 心理测评和心理测试系统在当代社会中扮演着越来越重要的角色.随着心理健康问题日益受到重视,心理测评和心理测试系统作为评估个体心理状态.诊断心理问题.制定心理治疗方案的工 ...
    
			
    10. 
						
  10. Codeforces 777 题目研讨
			
    题目连接 A B C D E 题目分析 A 难度:普及− 题面翻译: 给你三张牌:\(0\),\(1\),\(2\). 最初选一张,然后依次进行 \(n\) 次交换,交换规则为:中间一张和左边的一张, ...
    
			
    11.