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

<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. H5移动端字体自适应（也适用于宽高）
			
    原文地址: https://mp.weixin.qq.com/s/hhmav2sbAgb7w17ipVZiTw 方法一:纯css方法, 精确度高,IOS 和 安卓 字体大小同等比例1.1 以16px为 ...
    
			
    2. 
						
  2. 使用 FastGPT 工作流实现 AI 赛博算卦，一键生成卦象图
			
    最近那个男人写的汉语新解火遍了全网,那个男人叫李继刚,国内玩 AI 的同学如果不知道这个名字,可以去面壁思过了. 这个汉语新解的神奇之处就在于它只是一段几百字的提示词,效果却顶得上几千行代码写出来的应 ...
    
			
    3. 
						
  3. Abp源码分析之Abp最小系统
			
    最小系统 创建API项目 创建API项目并安装以下依赖 修改Program.cs为以下内容 using BookApp; var builder = WebApplication.CreateBuil ...
    
			
    4. 
						
  4. openresty操作mongodb
			
    最近项目中使用openresty,需要通过openresty连接mongo,经过几番折腾终于有了一个结果,现将其记录下来,也感谢模块提供者 使用openresty操作mongo 1.引入第三方的模块  ...
    
			
    5. 
						
  5. 量子线路设计：减少CNOT和T门的意义。
			
    在量子线路的设计中,我们往往希望减少线路中的CNOT门和T门的数目,原因如下: 一般文献宣称减少T门的数量是为了更高效地执行容错量子计算(fault-tolerant quantum computat ...
    
			
    6. 
						
  6. 本地文件包含漏洞详解与CTF实战
			
    1. 本地文件包含简介 1.1 本地文件包含定义 本地文件包含是一种Web应用程序漏洞,攻击者通过操控文件路径参数,使得服务器端包含了非预期的文件,从而可能导致敏感信息泄露. 常见的攻击方式包括: 包 ...
    
			
    7. 
						
  7. CAD Build 隐私说明
			
    该App不会收集任何用户隐私数据.
    
			
    8. 
						
  8. CSP-J2024 T1(poker/扑克)题解
			
    洛谷CSP-J 2024自测指路 前情提要:虽然洛谷讨论区里大多数都是倾向用哈希解决该题,但实际上可以用一些邪门小技巧来A这道题awa 先来读题. 题目中说小 P 想知道他至少得向小 S 借多少张牌, ...
    
			
    9. 
						
  9. json数据按照某一个相同键值进行分类成一个新的二维json数组
			
    1 formatTreeData(checkNodes){ 2 var map = {}, 3 targetData = []; 4 checkNodes.forEach(item => { 5 ...
    
			
    10. 
						
  10. axios获取上传进度报错xhr.upload.addEventListener is not a function
			
    错误问题 Vue:xhr.upload.addEventListener is not a function 这个问题是因为mockjs改动了axios里面XMLHttpRequest对象致使的 根据 ...
    
			
    11.