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

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

方式一: 使用****vue-office

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

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

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

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

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

1、<iframe/>

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

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

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

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

html 复制代码
<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/html | HTML 文档 |
| text/css | CSS 样式表 |
| text/plain | 纯文本文件 |
| image/jpeg | JPEG 图像 |
| image/png | PNG 图像 |
| image/gif | GIF 图像 |
| audio/mpeg | MP3 音频文件 |
| video/mp4 | MP4 视频文件 |
| application/pdf | PDF 文档 |
| application/msword | Word 文档(.doc) |
| application/vnd.openxmlformats- officedocument.wordprocessingml.document | Word 文档(.docx) |
| application/vnd.ms-excel | Excel 文档(.xls) |
| application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | Excel 文档(.xlsx) |
| application/vnd.ms-powerpoint | PowerPoint 演示文稿(.ppt) |
| application/vnd.openxmlformats-officedocument.presentationml.presentation | PowerPoint 演示文稿(.pptx) |

html 复制代码
<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/>**

html 复制代码
<object
 type="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的,直接调用浏览器方法打开链接

相关推荐
APIshop6 分钟前
1688 跨境寻源通详情接口深度解析:从接入到实战
前端·网络·chrome
爱上好庆祝14 分钟前
学习js的第四天
前端·css·学习·html·css3·js
d111111111d15 分钟前
UAER问题+修复小bug
前端·javascript·笔记·stm32·单片机·嵌入式硬件·学习
kyriewen111 小时前
Next.js:让你的React应用从“裸奔”到“穿衣服”
开发语言·前端·javascript·react.js·设计模式·ecmascript
MXN_小南学前端1 小时前
基于 Vue3 + ECharts 的数据大屏实例(提供gitHub仓库地址)
前端·javascript·echarts
宁雨桥1 小时前
for of,for in以及传统for循环的区别与不同场景下的使用选择
前端·javascript
椰羊~王小美1 小时前
除了前端 JS 配置的国际化,对于 JS 没覆盖到的文本,怎么实现国际化
前端·javascript·状态模式
AC赳赳老秦2 小时前
DBA 专属方案:用 OpenClaw 实现 SQL 语句优化、慢查询分析、数据库备份巡检全自动化
服务器·前端·数据库·ffmpeg·自动化·deepseek·openclaw
燐妤2 小时前
前端HTML编程1:初识html
前端·html5