前端页面或弹窗在线预览文件的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.rhkb.cn/news/481167.html

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

相关文章

成都睿明智科技有限公司抖音电商服务的新引擎

在这个短视频风起云涌的时代&#xff0c;抖音不仅成为了人们休闲娱乐的首选&#xff0c;更是商家们竞相角逐的电商新蓝海。在这片充满机遇与挑战的海域中&#xff0c;成都睿明智科技有限公司如同一艘装备精良的航船&#xff0c;引领着众多企业向抖音电商的深水区进发。今天&…

独家|京东调整职级序列体系

原有的M、P、T、S主序列将正式合并为新的专业主序列P。 作者|文昌龙 编辑|杨舟 据「市象」独家获悉&#xff0c;京东已在近日在内部宣布对职级序列体系进行调整&#xff0c;将原有的M、P、T、S主序列正式合并为新的专业主序列P&#xff0c;合并后的职级体系将沿用原有专业序…

免费开源的微信开发框架

请求参数 Header 参数 export interface ApifoxModel {"X-GEWE-TOKEN": string;[property: string]: any; } Body 参数application/json export interface ApifoxModel {/*** 设备ID*/appId: string;/*** 是否允许*/enabled: boolean;[property: string]: any; }…

在内网工作时,如何使用 vscode remote ssh 去连接内网服务器?

来源&#xff1a;https://stackoverflow.com/questions/56671520/how-can-i-install-vscode-server-in-linux-offline 看这个回答&#xff1a; 一般来说&#xff0c;内网会提供 vscode 安装包&#xff0c;remote-ssh 的 vsix&#xff0c;先安装好。 随后&#xff0c;保证自己…

YOLOv8实战无人机视角目标检测

本文采用YOLOv8作为核心算法框架&#xff0c;结合PyQt5构建用户界面&#xff0c;使用Python3进行开发。YOLOv8以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对无人机目标数据集进行训练和优化&#xff0c;该数据集包含丰富的无人机目标图像…

【二维动态规划:交错字符串】

介绍 编程语言&#xff1a;Java 本篇介绍一道比较经典的二维动态规划题。 交错字符串 主要说明几点&#xff1a; 为什么双指针解不了&#xff1f;为什么是二维动态规划&#xff1f;根据题意分析处转移方程。严格位置依赖和空间压缩优化。 题目介绍 题意有点抽象&#xff0c…

小米路由mini刷PDCN教程补充

花了10天帮助一个网友解决小米路由刷PDCN做打印服务器失败的过程&#xff0c;经历颇多。特别把中间的一些坑写出来&#xff0c;希望大家不要遇到。 首先网上好多教程写的都不错&#xff0c;很适合小白。推荐如下&#xff1a; 刷breed和PDCN方法&#xff1a; 小米路由器mini刷…

Unity ShaderLab 实现交互地毯

实现思路&#xff1a; 将一个位置坐标值传入到shader的顶点着色器中&#xff0c;和这个值位置相同的顶点沿着法线的y轴方向偏移&#xff0c;然后计算这个值与顶点的距离&#xff0c;在这个范围内的顶点&#xff0c;和凸起的点的位置做插值操作。 Shader Graph实现如下&#x…

浏览器语言和Accept-Language请求头指纹

注意&#xff1a;本文仅供学习交流使用 Navigator 对象的语言设置可以帮助网站识别您的首选语言。网站会基于这个值&#xff0c;调整向您呈现内容的所用语言。与其他任意Navigator 对象值一样&#xff0c;它也可用于浏览器指纹识别。 1. 浏览器语言&#xff1a;代表浏览器界面显…

数字IC后端实现之PR工具中如何避免出现一倍filler的缝隙?

在数字IC后端实现中&#xff0c;由于有的工艺foundary不提供Filler1&#xff0c;所以PR工具Innovus和ICC2在做标准单元摆放时需要避免出现两个标准单元之间的缝隙间距是Filler1。为了实现这个目的&#xff0c;我们需要给PR工具施加一些特殊的placement constraint&#xff08;典…

03.ES7 04.ES8

3.1.Array.includes Includes 方法用来检测数组中是否包含某个元素&#xff0c;返回布尔类型值 <script>// includes const mingzhu [王二,张三,李四,王五];//判断console.log(mingzhu.includes(张三));//trueconsole.log(mingzhu.includes(周六));//false//indexOf …

离线安装 Docker-IO:详细步骤指南

离线安装 Docker-IO:详细步骤指南 一、准备工作1.1 下载 Docker 离线安装包1.2 准备安装环境1.3 配置防火墙和 SELinux(可选)二、上传和解压离线安装包2.1 上传安装包2.2 解压安装包三、安装 Docker-IO3.1 移动 Docker 文件到系统目录3.2 配置 Docker 服务3.3 赋予服务文件执…

单细胞细胞通讯全流程分析教程,代做分析和辅导

0. 分析参数文件和细胞通讯的演示数据 0.1 细胞通讯分析总的参数文件&#xff0c;后面部分细胞通讯分析模块会用到 分析参数文件 参数文件名称&#xff1a;total_analysis_params_demo.xlsx &#xff0c;很多分析模块都是这个总的参数文件&#xff0c;我的这个总的参数文件如…

Flume 与 Kafka 整合实战

目录 一、Kafka 作为 Source【数据进入到kafka中&#xff0c;抽取出来】 &#xff08;一&#xff09;环境准备与配置文件创建 &#xff08;二&#xff09;创建主题 &#xff08;三&#xff09;测试步骤 二、Kafka 作为 Sink数据从别的地方抽取到kafka里面】 &#xff08;…

从零开始理解JVM:对象的生命周期之对象销毁(垃圾回收)

一、JVM参数 在学垃圾回收器之前&#xff0c;我们先要知道&#xff0c;jvm参数是怎么回事。因为配置各种回收器&#xff0c;必须对应各种参数设置。 标准参数&#xff08;-&#xff09; 所有的JVM实现都必须实现这些参数的功能&#xff0c;而且向后兼容 -help-version 非标准参…

win10中使用ffmpeg的filter滤镜

1 给视频加文字水印 1.1 添加播放时间 ffmpeg -i input.mp4 -vf "drawtextfontfileC\\:/Windows/fonts/consola.ttf:fontsize30:fontcolorwhite:timecode00\:00\:00\:00:rate25:textTCR\::boxcolor0x000000AA:box1:x20:y20" -y output.mp4 在视频的x20:y20位置添加t…

模拟器快速上手,助力HarmonyOS应用/服务高效开发

文章目录 1 创建模拟器1&#xff09;打开设备管理界面2&#xff09;设置本地模拟器实例存储路径3&#xff09;创建一个模拟器&#xff08;1&#xff09;选择模拟器设备&#xff08;2&#xff09;创建模拟器&#xff08;3&#xff09;启动模拟器&#xff08;4&#xff09;关闭模…

HarmonyOS(61) 组件间状态共享的分类以及状态选择器的选取优先级

状态共享 状态共享的分类状态共享选择器State与prop\Link\ObservedObjectLink组合的区别合理选择装饰器的顺序参考资料 状态共享的分类 HarmonyOS的组件之间是可以共享状态数据了&#xff0c;不同的组件之间&#xff0c;状态共享的场景也不一样&#xff0c;根据共享范围从小到…

高德地图 Readme GT 定制版 10.25.0.3249 | 极致简洁

这款定制版高德地图去除了广告&#xff0c;运行速度更快。虽然没有车道级导航、打车功能和红绿灯倒计时等功能&#xff0c;但支持正常登录和收藏功能。检测更新始终为最新版本。 大小&#xff1a;82.5M 下载地址&#xff1a; 百度网盘&#xff1a;https://pan.baidu.com/s/1Y…

去中心化物理基础设施网络(DePIN):重塑未来的基石

一、引言&#xff1a;DePIN的定义与背景 什么是DePIN&#xff1f; 去中心化物理基础设施网络&#xff08;DePIN&#xff0c;Decentralized Physical Infrastructure Networks&#xff09;是利用区块链和去中心化技术管理、优化和激励物理资源分配的一种新兴模式。与传统集中式…