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

<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. Java高并发，创建线程的新方式Callable接口
			
    我们已经知道创建线程的方式有1.继承thread类.2.实现Runnable接口 接下来讲创建线程的新方式Callable接口,首先对比一下Runnable接口和Callable接口的区别: 首先创建 ...
    
			
    2. 
						
  2. 项目中maven依赖无法自动下载
			
    [解决方法]: 安装目录conf--修改settting.xml文件在mirrors标签下添加子节点 <mirrors> <!-- mirror | Specifies a repo ...
    
			
    3. 
						
  3. ESP8266 + SN74HC595N(8位移位寄存器)
			
    目录 目录 介绍 准备 连线 代码 代码优化 运行 问题 总结 介绍 使用SN74HC595N 为 ESP8266 扩展 SN74HC595N(8位移位寄存器IC) 1. Vcc 16引脚 电压输入  ...
    
			
    4. 
						
  4. AnytimeCL：难度加大，支持任意持续学习场景的新方案 | ECCV'24
			
    来源:晓飞的算法工程笔记 公众号,转载请注明出处 论文: Anytime Continual Learning for Open Vocabulary Classification 论文地址:http ...
    
			
    5. 
						
  5. 如何在国内使用gcr.io镜像进行拉取
			
    [root@k8scloude2 ~]# docker pull gcr.io/google-samples/microservices-demo/emailservice:v0.4.0 换成 [ro ...
    
			
    6. 
						
  6. 【Azure Function】FTP上传了Python Function文件后，无法在门户页面加载函数的问题
			
    问题描述 通过FTP的方式,把本地能正常运行的Python Function文件上传到云上后,无法加载函数列表问题. 1:上传 function_app.py,requirements.txt文件到  ...
    
			
    7. 
						
  7. Python网络爬虫第一弹
			
    03.Python网络爬虫第一弹<Python网络爬虫相关基础概念> 爬虫介绍 引入 之前在授课过程中,好多同学都问过我这样的一个问题:为什么要学习爬虫,学习爬虫能够为我们以后的发展带来那 ...
    
			
    8. 
						
  8. KnowledgeManagement
			
    知识管理建议 总则 总参 从无知到有知 资料收集的习惯 发表是最好的记忆 Wiki 使用 建议: Blog 写作 Discuss 搜索技巧 回复:Yibie的知识管理流程与工具选择 一.个人知识管理的 ...
    
			
    9. 
						
  9. 【Java基础】-- instanceof 用法详解
			
    1. instanceof关键字 如果你之前一直没有怎么仔细了解过instanceof关键字,现在就来了解一下: instanceof其实是java的一个二元操作符,和=,<,>这些是类似 ...
    
			
    10. 
						
  10. 原生JS点名器，随机数
			
    因为工作内容的需要自己琢磨了一个随机数的点名器,很早就写出了一版,今天无意间又看到了之前写的代码,还是有很多bug的,今天做了完善在这里分享给大家 <script type="text ...
    
			
    11.