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

<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. html中div加滚动条
			
    div 加滚动条的两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;"></div ...
    
			
    2. 
						
  2. Power BI 通过输入数据新建表后重新进入编辑状态
			
    在使用Power BI时,有时候我们会直接通过输入数据构建一些简单的表,但是构建好后我们可能还需要对表格进行增删改的操作,这时候我们需要怎么才会恢复到表格的编辑状态呢?其实很简单,我们回到PQ里面,双 ...
    
			
    3. 
						
  3. 七、Spring Boot集成Spring Security之前后分离认证最佳实现
			
    二.自定义用户名密码认证过滤器RestfulUsernamePasswordAuthenticationFilter 1.注册过滤器方式 使用httpSecurity.addFilter/addFil ...
    
			
    4. 
						
  4. c++设计模式：设计原则
			
    c++设计八大原则(降低改变带来的代码修改) 一.依赖倒置原则(DIP) 1.高层模块(稳定)不应该依赖于低层模块(变化),二者应该依赖于抽象(更稳定) <高层模块 包括 低层模块所依赖的抽象, ...
    
			
    5. 
						
  5. 太强了！14.7K star！Windows系统居然还有开源替代版了？！
			
    在操作系统的世界里,Windows 系统一直占据着重要的地位.然而,你可能不知道的是,还有一个拥有 14.7K star 的开源替代版 --ReactOS. 1.ReactOS 介绍 ReactOS  ...
    
			
    6. 
						
  6. 如何手写实现 JSON Parser
			
    JSON.parse 是我们在前端开发中经常会用到API,如果我们要自己实现一个JSON.parse,我们应该怎么实现呢?今天我们就试着手写一个JSON Parser,了解下其内部实现原理. JSON ...
    
			
    7. 
						
  7. JUC.Condition学习笔记
			
    目录 Condition的概念 大体实现流程 I.初始化状态 II.await()*作 III.signal()*作 3个主要方法 Condition的数据结构 线程何时阻塞和释放 await()方法 ...
    
			
    8. 
						
  8. 2021GPLT
			
    病毒溯源 给定一棵树,树上有\(n\)个节点,编号从\(0\)到\(n-1\),请你输出从根节点开始的最长的一条链,且该链字典序最小 题解:\(dfs\)树的遍历 + 贪心 首先我们先找到入度为\(0 ...
    
			
    9. 
						
  9. word常规操作
			
    为何写标 招标: A公司要买100台电脑 [需求] 投标: 电脑公司看到招标后,就会投标:自我介绍(公司,产品,售后) [自我介绍满足需求] 中标: A公司选择XX公司 [选择] 保密价格内容 不能透 ...
    
			
    10. 
						
  10. 使用arcpy向server端发布服务
			
    import arcpy import os # Set output file names outdir = r"D:" service = "MapImageShar ...
    
			
    11.