前端页面或弹窗在线预览文件的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的,直接调用浏览器方法打开链接

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试