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

需求:后端返回给前端一个地址后,在前端页面上或则在弹框中显示在线的文档、表格、图片、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.mzph.cn/pingmian/62378.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windsurf可以上传图片开发UI了

背景 曾经羡慕Cursor的“画图”开发功能&#xff0c;这不Windsurf安排上了。 Upload Images to Cascade Cascade now supports uploading images on premium models Ask Cascade to build or tweak UI from on image upload New keybindings Keybindings to navigate betwe…

ArraList和LinkedList区别

文章目录 一、结构不同二、访问速度三、插入和删除操作的不同1、决定效率有两个因素&#xff1a;数据量和位置。2、普遍说法是“LinkedList添加删除快”&#xff0c;这里是有前提条件的 四、内存占用情况五、使用场景六、总结 一、结构不同 LinkedList&#xff1a;它基于双向链…

【模型剪枝】YOLOv8 模型剪枝实战 | 稀疏化-剪枝-微调

文章目录 0. 前言1. 模型剪枝概念2. 模型剪枝实操2.1 稀疏化训练2.2 模型剪枝2.3 模型微调总结0. 前言 无奈之下,我还是写了【模型剪枝】教程🤦‍♂️。回想当年,在写《YOLOv5/v7进阶实战专栏》 时,我经历了许多挫折,才最终完成了【模型剪枝】和【模型蒸馏】的内容。当时…

关于函数式接口和编程的解析和案例实战

文章目录 匿名内部类“匿名”在哪里 函数式编程lambda表达式的条件Supplier使用示例 ConsumeracceptandThen使用场景 FunctionalBiFunctionalTriFunctional 匿名内部类 匿名内部类的学习和使用是实现lambda表达式和函数式编程的基础。是想一下&#xff0c;我们在使用接口中的方…

学习笔记:黑马程序员JavaWeb开发教程(2024.11.29)

10.5 案例-部门管理-新增 如何接收来自前端的数据: 接收到json数据之后&#xff0c;利用RequestBody注解&#xff0c;将前端响应回来的json格式的数据封装到实体类中 对代码中Controller层的优化 发现路径中都有/depts&#xff0c;可以将每个方法对应请求路径中的…

数据库管理-第268期 srvctl在ADG备库添加PDB的service报错,看如何解决(20241129)

数据库管理268期 2024-11-29 数据库管理-第268期 srvctl在ADG备库添加PDB的service报错&#xff0c;看如何解决&#xff08;20241129&#xff09;1 背景2 处理过程3 原因总结 数据库管理-第268期 srvctl在ADG备库添加PDB的service报错&#xff0c;看如何解决&#xff08;202411…

brew安装mongodb和php-mongodb扩展新手教程

1、首先保证macos下成功安装了Homebrew&#xff0c; 在终端输入如下命令&#xff1a; brew search mongodb 搜索是不是有mongodb资源&#xff0c; 演示效果如下&#xff1a; 2、下面来介绍Brew 安装 MongoDB&#xff0c;代码如下&#xff1a; brew tap mongodb/brew brew in…

国产FPGA+DSP 双FMC 6U VPX处理板

高性能国产化信号处理平台采用6U VPX架构&#xff0c;双FMC接口国产V7 FPGA 国产多核 DSP 的硬件架构&#xff0c;可以完成一体化电子系统、有源相控阵雷达、电子侦察、MIMO 通信、声呐等领域的高速实时信号处理。 信号处理平台的组成框图如图 1 所示&#xff0c; DSP处理器采…

AI数据分析工具(二)

豆包-免费 优点 强大的数据处理能力&#xff1a; 豆包能够与Excel无缝集成&#xff0c;支持多种数据类型的导入&#xff0c;包括文本、数字、日期等&#xff0c;使得数据整理和分析变得更加便捷。豆包提供了丰富的数据处理功能&#xff0c;如数据去重、填充缺失值、转换格式等…

STM32G4系列MCU的Direct memory access controller (DMA)功能介绍之二

目录 概述 1 DMA通道 1.1 可编程数据大小 1.2 指针增量 2 通道配置 2.1 配置步骤 2.2 通道状态和禁用通道 3 模式应用 3.1 循环模式&#xff08;内存到外设/外设到内存的传输&#xff09; 3.2 内存到内存模式 3.3 Peripheral-to-peripheral模式 3.4 编程转移方向&a…

【一文读懂】大语言模型

学习参考 项目教程&#xff1a;中文教程 代码仓库&#xff1a;代码地址 仓库代码目录说明&#xff1a; requirements.txt&#xff1a;官方环境下的安装依赖 notebook&#xff1a;Notebook 源代码文件 docs&#xff1a;Markdown 文档文件 figures&#xff1a;图片 data_base&…

大数据-234 离线数仓 - 异构数据源 DataX 将数据 从 HDFS 到 MySQL

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

鸿蒙进阶篇-Stage模型、UIAbility

“在科技的浪潮中&#xff0c;鸿蒙操作系统宛如一颗璀璨的新星&#xff0c;引领着创新的方向。作为鸿蒙开天组&#xff0c;今天我们将一同踏上鸿蒙基础的探索之旅&#xff0c;为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…

学习threejs,使用specularMap设置高光贴图

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…

一个简洁的ajax注册登录找回密码切换的前端页面

成功和失败不同颜色显示&#xff0c;纯原生代码不需要jq等第三方插件 <% Language"VBScript" CodePage"65001"%> <% Response.Charset "UTF-8" Session.CodePage "65001" Response.Addheader "Content-Type",&q…

uniapp首页样式,实现菜单导航结构

实现菜单导航结构 1.导入字体图标库需要的文件 2.修改引用路径iconfont.css 3.导入到App.vue中 <style>import url(./static/font/iconfont.css); </style>导航区域代码 VUE代码 <template><view class"home"><!-- 导航区域 --><…

解析客服知识库搭建的五个必要性

在当今竞争激烈的商业环境中&#xff0c;客服知识库的搭建已成为企业提升服务质量、优化客户体验的重要手段。一个完善的客服知识库不仅能帮助企业高效管理客户服务流程&#xff0c;还能显著提升客户满意度和忠诚度。以下是搭建客服知识库的五个必要性&#xff1a; 1. 提升服务…

淘宝Vision Pro:革新购物体验的沉浸式未来

引言 简要介绍淘宝Vision Pro版的背景,包括它在美区AppStore的发布及WWDC上的展示。阐述本文的目的:为读者提供一个全面的功能概览与设计背后的思考。设计原则 列出并简要解释5条设计原则(熟悉、直观、真实、实用、易用)。说明这些原则如何指导整个产品设计过程。核心功能详…

【CSS in Depth 2 精译_062】第 10 章 CSS 中的容器查询(@container)概述 + 10.1 容器查询的一个简单示例

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 ✔️ 10.1.1 容器尺寸查询的用法 ✔️ 10.2 深入理解容器10.3 与容器相关的单位10.4 容器样式查询的用法10.5 本章小结 文章目录 第 10…

HCIE:详解OSPF,从基础到高级特性再到深入研究

目录 前言 一、OSPF协议基本原理 简介 基本原理 OSPF路由器类型 OSPF网络类型 OSPF报文类型和封装 OSPF邻居的建立的维护 DR和BDR的选举 伪节点 LSDB的更新 OSPF的配置 二、OSPF的高级特性 虚连接&#xff08;Virtual-Link&#xff09; OSPF的LSA和路由选择 OSPF…