Blob 下载类型 type 大全

原创

已于 2024-05-11 09:21:03 修改 · 4.8k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#microsoft #前端

于 2023-05-06 21:30:49 首次发布

本文档详细介绍了如何使用Blob进行二进制文件下载，包括不同后缀名的文件处理，提供了后台返回文件流下载的函数封装及调用示例。

序

Blob 二进制进行文件下载功能（后台返回文件流下载导出函数封装、调用示例），涉及不同后缀名的文件，这里整理此篇

//  type 表示默认保存类型为图片png格式
window.URL.createObjectURL(new Blob([res], {
   
   type : 'image/png'}))

Blob 的配置关系对应表：

后缀名	文件类型	类型（type）
.xls	Microsoft Excel	application/vnd.ms-excel
.xlsx	Microsoft Excel (OpenXML)	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csv	CSV	text/csv
.doc	Microsoft Word	applic

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MoXinXueWEB

关注关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

new Blob下载文件流，并根据文件后缀动态匹配blob的type

m0_60336681的博客

04-07

2306

new Blob下载文件流，并根据文件后缀动态匹配blob的type

各种数据类型的 Blob 对象以及使用场景

来杯卡布奇诺的博客

07-17

621

在 JavaScript 中,您可以使用 Blob 对象来生成各种数据类型的 Blob 对象。在 Web 页面上显示。

参与评论您还未登录，请先登录后发表或查看评论

完整的文档类型 Incomplete list of MIME types

点滴

08-26

762

后缀名文件 mime类型 .aac AAC audio audio/aac .abw AbiWord document application/x-abiword .arc Archive document (multiple files embedded) appli...

blob类型数据

09-29

以操作数据库SQLServer中的image字段为例,介绍了一种在数据库中存储BLOB(Binarylargeobject)类型数据的简单、高效的方法,并阐述了其工作原理及实现过程。

blob的type类型都有哪些

weixin_72689772的博客

03-31

657

【代码】blob的type类型都有哪些。

Blob 对象下载文件时 type 类型大全,及下载方法封装

i_Satan的博客

09-15

1927

派大星 1@王新新 2255。

精选资源

常用文件流下载文件（ Blob）时各种类型文件的 type

02-09

常用文件流下载文件（ Blob）时各种类型文件的 type

JavaScript之Blob对象类型的具体使用方法

10-15

Blob对象的另一个属性是type，它表示对象包含的数据类型，也就是MIME类型。例如，如果创建一个Blob对象，其中包含JSON字符串数据，那么type将对应为“application/json”。 Blob对象还包含一些基本的方法。其中一个...

jQuery的ajax下载blob文件

10-21

例如文章中提到的“jquery-ajax-blob-arraybuffer.js”插件，这个插件可以帮助我们在使用jQuery ajax时处理Blob类型的数据。它的基本思路是手动构建一个XMLHttpRequest对象，并进行设置，以确保服务器返回的是Blob...

javascript使用Blob对象实现的下载文件操作示例

10-15

在JavaScript中，Blob对象是用来表示不可变的原始数据，它不是JavaScript的内置数据类型，而是用来存储二进制数据的一种方式。Blob对象是File对象的基础，File对象在Blob的基础上增加了与用户系统文件交互的能力。本...

vue-以文件流-blob-的形式-下载-导出文件操作

10-14

总的来说，Vue中以文件流-Blob形式下载导出文件的关键步骤包括：设置请求响应类型为`blob`、获取文件流、构造Blob对象、生成URL并触发下载。为了确保良好的跨浏览器兼容性，可能需要针对不同的浏览器实现不同的下载...

Blob类型下载

weixin_44696567的博客

06-24

1973

public static boolean dowloadToBlob(Attchment Attachment,HttpServletRequest request, HttpServletResponse response) { try { String filename = Attachment.getStrFileName(); byte[] fileStream = ImageUtils...

数据库-列的类型-Blob类型

xiaov_sen的博客

05-27

363

【代码】数据库-列的类型-Blob类型。

Blob文件流下载写法及type类型汇总

YG_zhh的博客

10-20

2262

前端下载blob文件流写法

new Blob() 文件流下载文件不同文件类型的 type 值整理

L_yvpeng的博客

12-08

1万+

在 Vue 项目中，经常用 Blob 二进制进行文件下载功能（vue后台返回文件流下载导出函数封装、调用示例），涉及不同后缀名的文件，这里整理一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时，根据需要下载的文件类型修改 type 值进行下载即可。

new Blob()实现不同类型的文件下载功能

夜空孤狼啸的博客

04-02

3560

在前端项目实际开发过程中，经常需要对各种各样的类型进行下载，因为我不是前端出生，就自己在网上学习最后使用到自己的项目当中，代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多，我就采用了这一方式。下面是一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时，根据需要下载的文件类型修改 type 值进行下载即可。

用文件流下载文件（ Blob）时各种类型文件的 type 整理

weixin_43299180的博客

08-20

1万+

最近用 Blob 做文件下载的功能，涉及不同后缀的文件，但是每当设置转换的文件类型的时候就很头疼，因为这东西平时也不怎么常见，这里我参考 Blob 配置整理了一份，方便以后使用。拓展名文件类型 MIME类型 .aac AAC 音频 audio/aac .abw AbiWord 文档 application/x-abiword .arc 存档文档(多个文件嵌入) application/x-freearc .avi AVI: 音频视频交错 video/x-msvideo .

前端下载文件的几种方式使用Blob下载文件

最新发布

08-23

### Blob对象的type属性对下载文件的影响在使用 `Blob` 对象创建文件并进行下载时，`type` 属性扮演着重要的角色，它定义了文件的 MIME 类型。浏览器会根据 `type` 属性来决定如何处理该文件，例如是直接在浏览器中显示还是触发下载行为。如果 `type` 属性设置不当，可能会导致浏览器无法正确识别文件内容，从而影响下载体验。在创建 `Blob` 对象时，应确保 `type` 参数与实际文件内容匹配。例如，在创建文本文件时可以使用 `text/plain`，而在创建 PDF 文件时应使用 `application/pdf`。如果未指定 `type` 参数或设置为不合适的值，浏览器可能无法正确解析文件内容，导致下载后文件内容异常或无法打开。 ```javascript const blob = new Blob(['示例文本'], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'example.txt'; link.click(); URL.revokeObjectURL(url); ``` 此代码片段展示了如何正确使用 `Blob` 的 `type` 属性来创建一个文本文件，并触发下载行为[^1]。在某些浏览器环境中，例如奇安信浏览器，如果 `Blob` 的 `type` 属性与实际内容不匹配，可能会触发浏览器的安全策略，导致下载失败或文件被标记为不可信。因此，在使用 `Blob` 对象创建文件时，应确保 `type` 属性与文件内容一致，以避免因 MIME 类型不匹配导致的安全策略拦截。此外，由于 `Blob` 对象的 `type` 属性是可选的，如果未指定，其默认值为空字符串。在这种情况下，浏览器可能无法正确识别文件类型，从而影响下载行为。因此，建议在创建 `Blob` 对象时始终指定合适的 `type` 属性，以确保下载文件的兼容性和安全性。在使用 `URL.createObjectURL` 创建对象 URL 后，应及时调用 `URL.revokeObjectURL` 释放资源，以避免内存泄漏。然而，释放对象 URL 的时机应选择在文件下载完成之后，否则可能导致下载中断或失败。 ```javascript const blob = new Blob(['示例文本'], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'example.txt'; link.onload = () => { URL.revokeObjectURL(url); }; link.click(); ``` 上述代码展示了如何在文件下载完成后释放对象 URL，以避免内存泄漏问题[^1]。 ###