前端页面或弹窗在线预览文件的N种方式

news/2024/11/29 9:01:40/

需求:后端返回给前端一个地址后,在前端页面上或则在弹框中显示在线的文档、表格、图片、pdf、video等等,嵌入到前端页面

方式一: 使用vue-office

        地址:vue-office简介 | vue-office

        个人感觉这个插件是最好用的,用法也很简单,之前还有个需求,就是在附件上传到后端之前,用户点击文件名,在线预览附件,当时用这个封装的,有需要代码的可以私信我,配合element-ui封装的

        但是这个也有个弊端,就是它只支持docx、xlsx、pdf,不过一般情况够用了,但是用户需求不同,如果需要用到其他的请往下看。

方式二:使用原生的html的标签

        有好几种可以做嵌套使用:

  1、<iframe/>

        它能够将另一个 HTML 页面嵌入到当前页面中

        这种方式基本上表格,文档,图片,pdf格式都可以使用,src就是你的在线地址

        可以支持多个表格内容,并且点击名字的时候调用浏览器下载,还是很方便的

        它的功能不止于此,以及后面会讲到的,详细都可以在这里查MDN Web Docs

  

<iframe         
src="https://api.idocv.com/view/urlurl=http%3a%2f%2fapi.idocv.com%2fdata%2fdoc%2ftest.xlsx"
width="100%"
height="500"
style="border: none">
</iframe>

 2、<embed/>

         data为你的文件地址

         type是他的属性,想显示什么内容做的一个类型限定,常见的有:

type类型作用
text/htmlHTML 文档
text/cssCSS 样式表
text/plain纯文本文件
image/jpegJPEG 图像
image/pngPNG 图像
image/gifGIF 图像
audio/mpegMP3 音频文件
video/mp4MP4 视频文件
application/pdfPDF 文档
application/mswordWord 文档(.doc)
application/vnd.openxmlformats-  officedocument.wordprocessingml.documentWord 文档(.docx)
application/vnd.ms-excelExcel 文档(.xls)
application/vnd.openxmlformats-officedocument.spreadsheetml.sheetExcel 文档(.xlsx)
application/vnd.ms-powerpointPowerPoint 演示文稿(.ppt)
application/vnd.openxmlformats-officedocument.presentationml.presentationPowerPoint 演示文稿(.pptx)
<embed
type="application/pdf"
src="https://api.idocv.com/view/url?url=http%3a%2f%2fapi.idocv.com%2fdata%2fdoc%2ftest.pdf"
width="440"
height="480"
/>

 3、<object/>

        这个也是个嵌入式的,表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源

        type是他的属性,想显示什么内容做的一个类型限定,常见的类型同<embed/>

<objecttype="application/vnd.openxmlformats-officedocument.wordprocessingml.document"data="http://api.idocv.com/view/url?url=http%3A%2F%2Fapi.idocv.com%2Fdata%2Fdoc%2Fmanual.docx"width="440"height="480"
>
</object>

 4、<embed><object></object></embed>

        有的浏览器可能会出现不支持情况,文档解决方法是嵌套使用,方法类上

5、<a>

        a标签是最常见的方式,但是他会跳转到一个新的页面去

6、使用window.open(src) 

         这个方法也是ok的,直接调用浏览器方法打开链接


http://www.ppmy.cn/news/1550860.html

相关文章

C语言蓝桥杯组题目

系列文章目录 文章目录 系列文章目录前言题目第一题.1, 2, 3, 4 能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f;第二题: 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上168又是一个完全平方数&#xff0c;请问该数是多少&…

Maven 无法打包Springboot项目解决方法

问题1 JAR will be empty - no content was marked…&#xff1b; repackage failed: Unable to find main class 用生命周期里的东西进行打包而不是插件里面。 jar中没有主清单属性 java -jar xxx-0.0.1-SNAPSHOT.jar 没有主清单属性 Unable to access jarfile dddl-0.0.1-SN…

2.mybatis整体配置

文章目录 mybatis-config.xml介绍SqlSessionFactoryBuilderXMLConfigBuilderpropertiessetting类型别名&#xff08;typeAliases&#xff09;扫描插件(plugins)解析objectFactory(对象工厂)解析objectWrapperFactory解析reflectorFactorysettingsElement()方法环境配置&#xf…

《C++ Primer Plus》学习笔记|第四章-复合类型 (部分知识)

4.5共用体 union union&#xff0c;也叫联合体&#xff0c;允许在同一段内存位置中存储不同的数据类型&#xff0c;这些不同的数据类型共享同一块内存空间。 共用体的大小为其成员中占用空间最大的成员的大小。 共用体的用途之一是&#xff0c;当数据项使用两种或更多种格式…

模拟手机办卡项目(移动大厅)--结合面向对象、JDBC、MYSQL、dao层模式,使用JAVA控制台实现

目录 1. 项目需求 2. 项目使用的技术 3.项目需求分析 3.1 实体类和接口 4.项目结构 5.业务实现 5.1 登录 5.1.1 实现步骤 5.1.2 原生代码问题 ​编辑 5.1.3 解决方法 1.说明&#xff1a; 2. ResultSetHandler结果集处理 5.1.4 代码 5.1.5 实现后的效果图 登录成功​…

分布式MQTT代理中使用布隆过滤器管理通配符主题

论文标题&#xff1a;Wildcard Topic Management using Bloom Filter in Distributed MQTT Brokers 中文标题&#xff1a;分布式MQTT代理中使用布隆过滤器管理通配符主题 作者信息&#xff1a; Ryohei Banno&#xff0c;Hitotsubashi University, Graduate School of Social…

QT 实现组织树状图

1.实现效果 在Qt中使用QGraphicsItem和QGraphicsScene实现树状图,你需要创建自定义的QGraphicsItem类来表示树的节点,并管理它们的位置和连接,以下是实现效果图。 2.实现思路 可以看见,上图所示,我们需要自定义连线类和节点类。 每个节点类Node,需要绘制矩形框体文字…

告别繁琐剪辑:【星海智算】FunClip重新定义视频创作

FunClip模型介绍 FunClip是由阿里达摩院精心打造的一款完全开源、本地部署的自动化视频剪辑工具。FunClip让用户能够根据识别结果&#xff0c;轻松选择文本片段或特定说话人&#xff0c;从而快速裁剪出所需视频片段。FunClip的特色功能包括集成高精度的中文ASR模型、支持热词定…