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

<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. 通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目
			
    使用duxapp,我是如何实现快速完成项目开发的? 像下面这个例子,这个项目有140多个页面,但是真实的开发时间,在熟练使用duxapp的情况下,不会超过两周,并且可以将它兼容APP.小程序.H5 这 ...
    
			
    2. 
						
  2. pytest的conftest.py文件讲解
			
    一.conftest.py的特点 1.可以跨.py文件调用,有多个.py文件调用时,可让conftest.py只调用了一次fixture,或调用多次fixture 2.conftest.py与运行的用 ...
    
			
    3. 
						
  3. DOS批处理实验
			
    DOS批处理实验 一. 实验目的 建立一个.bat文件,清理windows垃圾文件. 二. 实验内容和要求 在Windows环境下建立一个.bat文件实现对垃圾文件.安装程序.编辑文件时产生的临时文件 ...
    
			
    4. 
						
  4. C++中的各种锁
			
    在多线程开发中,经常会遇到数据同步,很多情况下用锁都是一个很好的选择.C++中常用的锁主要有下面几种: 互斥锁(std::mutex) 这是最基本的一种锁.它用于保护共享资源,在任意时刻,最多只有一个 ...
    
			
    5. 
						
  5. QT中的宏定义
			
    1.操作系统宏 //在<QtGlobal>中,定义了各个系统的宏定义 //Defined on AIX. #ifdef Q_OS_AIX // Defined on Android. #d ...
    
			
    6. 
						
  6. 成为JavaGC专家Part II — 如何监控Java垃圾回收机制
			
    本文是成为Java GC专家系列文章的第二篇.在第一篇<深入浅出Java垃圾回收机制>中我们学习了不同GC算法的执行过程,GC是如何工作的,什么是新生代和老年代,你应该了解的JDK7中的5 ...
    
			
    7. 
						
  7. 二、STM32F103C8T6-定时器
			
    STM32F103C8T6 定时器概述 STM32F103C8T6 作为一款广泛使用的微控制器,内置多个定时器,能够支持多种计时和控制功能,如精确延时.脉冲宽度调制(PWM).捕获比较(Capture ...
    
			
    8. 
						
  8. Windows下搭建Linux开发环境（vagrant）
			
    [下载] vagrant软件:https://www.virtualbox.org/wiki/Downloads centos镜像: http://isoredirect.centos.org/cen ...
    
			
    9. 
						
  9. Flink 1.10中idea运行出错invalid flag
			
    今日好奇,下载Flink 1.10的源码在本机玩一玩. 将工程按照正常流程导入IDEA后,运行flink-examples中的demo竟出现如下错误 Error:java: invalid flag: ...
    
			
    10. 
						
  10. 借助AI助手分析LlamaIndex的工作流可视化
			
    接续上次的讨论,我们上次主要分析了LlamaIndex工作流的核心流程,当前还剩下一行代码需要关注,那就是关于工作流的可视化.今天我们的目标是深入理解这一可视化部分的主要流程,并且对其大体的实现方式进 ...
    
			
    11.