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

已于 2022-06-23 14:09:47 修改
阅读量1.6w 收藏 157
点赞数 30
分类专栏： 前端 vue 文章标签： Blob 文件类型 type 下载 导出
于 2021-08-20 13:57:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43299180/article/details/119818982
版权
vue 同时被 2 个专栏收录
51 篇文章 17 订阅
订阅专栏
前端
31 篇文章 15 订阅
订阅专栏

在 VUE 项目中，常用 Blob 二进制数据做文件下载的功能，涉及不同后缀的文件，但是每当设置转换的文件类型的时候就很头疼，因为这东西平时也不怎么常见，这里我参考 Blob 配置整理了一份，方便以后使用。

拓展名文件类型MIME类型
.aacAAC 音频audio/aac
.abwAbiWord 文档application/x-abiword
.arc存档文档(多个文件嵌入)application/x-freearc
.aviAVI: 音频视频交错video/x-msvideo
.azw亚马逊Kindle电子书格式application/vnd.amazon.ebook
.bin任何类型的二进制数据application/octet-stream
.bmpWindows OS/2位图图形image/bmp
.bzBZip 存档application/x-bzip
.bz2BZip2 存档application/x-bzip2
.cshC-Shell 脚本application/x-csh
.cssCSStext/css
.csvCSVtext/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotMS嵌入式OpenType字体application/vnd.ms-fontobject
.epub电子出版物(EPUB)application/epub+zip
.gifGIFimage/gif
.htm超文本标记语言 (HTML)text/html
.html超文本标记语言 (HTML)text/html
.icoIcon 格式image/vnd.microsoft.icon
.icsiCalendar 格式text/calendar
.jarJava Archive (JAR)application/java-archive
.jpegJPEG 图片image/jpeg
.jpgJPEG 图片image/jpeg
.jsJavaScripttext/javascript
.jsonJSON 格式application/json
.jsonldJSON-LD 格式application/ld+json
.mid乐器数字接口(MIDI)audio/midi audio/x-midi
.midi乐器数字接口(MIDI)audio/midi audio/x-midi
.mjsJavaScript 模块text/javascript
.mp3MP3 音频audio/mpeg
.mpegMPEG 视频video/mpeg
.mpkg苹果安装程序包application/vnd.apple.installer+xml
.odpOpenDocument演示文档application/vnd.oasis.opendocument.presentation
.odsOpenDocument 电子表格文件application/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument 文本文档application/vnd.oasis.opendocument.text
.ogaOGG 音频audio/ogg
.ogvOGG 视频video/ogg
.ogxOGGapplication/ogg
.otfOpenType 字体font/otf
.png便携式网络图形（PNG）image/png
.pdfPDFapplication/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.rarRAR 存档application/x-rar-compressed
.rtf富文本格式 (RTF)application/rtf
.shBourne shell 脚本application/x-sh
.svg可缩放矢量图形 (SVG)image/svg+xml
.swf小型web格式 (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape 归档(TAR)application/x-tar
.tif标记图像文件格式 (TIFF)image/tiff
.tiffTagged Image File Format (TIFF)image/tiff
.ttfTrueType 字体font/ttf
.txtTexttext/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wav波形音频格式audio/wav
.webaWEBM 音频audio/webm
.webmWEBM 视频video/webm
.webpWEBP 图片image/webp
.woff网页开放字体格式 (WOFF)font/woff
.woff2网页开放字体格式 (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.xmlXMLapplication/xml（普通用户不可读）、text/xml（普通用户可读）
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIPapplication/zip
.3gp3GPP audio/video 容器video/3gpp、audio/3gpp（不含视频）
.3g23GPP2 audio/video 容器video/3gpp2、audio/3gpp2（不含视频）
.7z7-zipapplication/x-7z-compressed

以上列表里面查不到的请移步：Media Types

三个木马人
关注
  • 30
    点赞
  • 踩
  • 157
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
Vue利用Blob下载原生二进制数组文件
10-16
主要为大家详细介绍了Vue利用Blob下载原生二进制数组文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
fetch-blob:Node.js 中的 Blob 实现，最初来自 node-fetch
07-23
获取-blob Node.js 中的 Blob 实现，最初来自 。 安装 npm install fetch-blob 从 2x 升级到 3x 从 2 更新到 3 应该是轻而易举的，因为 blob 规范没有太多变化。 主要版本的主要原因是编码标准。 - 内部 WeakMaps 被私有字段替换 - 内部 Buffer.from 被替换为 TextEncoder/Decoder - 内部缓冲区被替换为 Uint8Arrays - CommonJS 被替换为 ESM - 通过调用blob.stream()返回的节点流被替换为 whatwg 流 - （阅读“与其他 blob 的区别”了解更多信息。） 与其他 Blob 的区别 不同的NodeJS buffer.Blob （添加于：v15.7.0）和浏览器原生斑点这polyfilled版本无法通过PostMessage的发送 这个 blob 版本
Blob 和 File 的区别，以及 Blob、File、Base64 三种类型的相互转换
bighead的博客
01-12 707
表示不可变的、原始数据的类文件对象。它通常用于存储大块的二进制数据，比如图像、音频或视频文件等。对象可以包含任意类型的数据，不仅限于文本或二进制数据。它的数据是只读的，你不能直接修改。的子类，通常用于表示用户选择的文件。它包含了文件的元信息，如文件名、大小、修改时间等。的一种特殊情况，用于表示用户选择的文件，并包含了文件的相关信息。的所有功能，并在此基础上添加了文件相关的元信息。中用于处理二进制数据的对象，但它们有一些区别。是用于存储任意类型的二进制数据的对象，而。通常用于一般的二进制数据存储，而。
文件流（FileReader）、Blob 和 Base64
最新发布
weixin_43502666的博客
02-05 295
1、文件流（FileReader） FileReader 可以读取文件并以二进制或文本格式输出。可以通过 FileReader 将文件转换成一种便于传输和处理的格式，如将文件转换成 Base64 编码字符串或 ArrayBuffer 数组缓冲区对象。 优点:FileReader 的主要优点是能够直接读取文件内容，并对其进行深度定制化处理，适合于需要在前端对文件内容进行操作的场景，例如图片预览、视频截取等。 2、Blob Blob（Binary Large Object）是一种 JavaScript 对象，表
前端利用Blob对象创建指定文件并下载
dzqxwzoe的博客
02-07 813
它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变。array 是一个由ArrayBuffer（二进制数据缓冲区）、ArrayBufferView（二进制数据缓冲区的array-like视图）、Blob、DOMString等对象构成的Array，或者其他类似对象的混合体，它将会被放进Blob。方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。
处理Blob类型数据：
热门推荐
认知 行动 坚持
07-12 3万+
处理Blob类型数据： （1）Blob(Binary long Object)是二进制长对象的意思，Blob通常用于存储大文件，典型的Blob内容是一张图片或者一个声音文件，由于他们的特殊性，必须使用特殊的方式来存储。使用Blob列可以把照片声音等文件的二进制数据保存在数据库里，并可以从数据库里恢复指定文件。 （2）如果需要将图片插入数据库，显然不能通过普通的SQL语句来完成，因为有一个关键的问题...
完整的文档类型 Incomplete list of MIME types
点滴
08-26 557
后缀名 文件 mime类型 .aac AAC audio audio/aac .abw AbiWord document application/x-abiword .arc Archive document (multiple files embedded) appli...
Blob 下载类型 type 大全
MoXinXueWEB的博客
05-06 3247
小菜鸟在整理
blob是什么类型？
webot123456的博客
04-13 1万+
BLOB (binary large object)----二进制大对象，是一个可以存储二进制文件的容器。 　　在计算机中，BLOB常常是数据库中用来存储二进制文件的字段类型。 　 　　BLOB是一个大文件，典型的BLOB是一张图片或一个声音文件，由于它们的尺寸，必须使用特殊的方式来处理（例如：上传、下载或者存放到一个数据库）。 根据Eric Raymond的说法，处理BLOB的主要思想就是让文件处理器（如数据库管理器）不去理会文件是什么，而是关心如何去处理它。 　 　　但也有专家强调，这种处理大数据对象的
生成Blob中属性格式
prey1025的博客
03-30 1194
Blob由一个可选的字符串(type)和blobParts组成。
Blob基本介绍
qq_45345113的博客
10-18 1275
Blob基本介绍及使用
利用Blob进行文件上传的完整步骤
10-18
BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。下面这篇文章主要给大家介绍了关于利用Blob进行文件上传的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
对Python中type打开文件的方式介绍
09-20
下面小编就为大家介绍一下对Python中type打开文件的方式。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
常用文件流下载文件（ Blob）时各种类型文件的 type
02-09
常用文件流下载文件（ Blob）时各种类型文件的 type
jQuery的ajax下载blob文件
10-21
主要介绍了jQuery的ajax下载blob文件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js使用文件流下载csv文件的实现方法
01-21
现在我们开始来理解下Bolb对象及它的文件流下载应用场景，话不多说了，来一起看看详细的介绍吧 1. 创建Blob对象方式如下： var blob = new Blob(dataArray, options); dataArray: 它是一个数组，它包含了要添加到...
javascript使用Blob对象实现的下载文件操作示例
10-15
主要介绍了javascript使用Blob对象实现的下载文件操作,结合实例形式分析了javascript使用Blob对象下载文件相关原理、操作技巧与注意事项,需要的朋友可以参考下
axios下载文件请求, responseType为blob时捕获后端错误问题
09-01
### 回答1： axios是一个基于Promise的HTTP客户端库，支持在浏览器和Node.js中发送HTTP请求。当使用axios下载文件时，如果需要指定响应的数据类型为blob，则可以使用responseType配置选项。 在使用responseType为blob时，如果后端出现错误，可以通过catch捕获错误信息并处理。例如： ```javascript axios({ method: 'get', url: '/download/file', responseType: 'blob' }).then((response) => { // 处理下载的文件 }).catch((error) => { // 处理捕获到的错误信息 }); ``` 在上述代码中，当后端出现错误时，会触发catch块中的代码，可以在这里处理错误信息，例如提示用户下载失败或重新尝试下载等操作。 ### 回答2： 在使用axios进行文件下载请求时，我们可以通过设置responseType为blob来获取文件的二进制数据。然而，当后端返回的数据不是预期的文件类型时，可能会出现错误。为了捕获后端错误问题，我们可以使用try-catch语句来处理异常。 首先，我们需要设置axios的响应拦截器，用于在请求返回时捕获错误。在拦截器中，我们将判断返回数据的类型，如果不是预期的blob类型，则抛出一个自定义的错误。 ```javascript axios.interceptors.response.use( response => { if (response.config.responseType === 'blob' && response.data.type !== 'application/octet-stream') { throw new Error('后端返回数据异常') } return response }, error => { return Promise.reject(error) } ) ``` 接下来，在发起文件下载请求时，我们可以使用try-catch语句来包裹axios请求，并处理可能抛出的错误。 ```javascript try { const response = await axios.get('/download', { responseType: 'blob' }) // 文件下载成功的逻辑处理 } catch (error) { // 捕获并处理后端错误 console.error(error.message) } ``` 这样，当后端返回的数据不是预期的blob类型时，我们就可以捕获到错误，并进行相应的处理，例如输出错误信息到控制台。 注意，由于axios是基于Promise的异步请求库，我们使用了async/await来进行异步处理。当然，你也可以使用.then()来处理异步请求。以上代码只是一个简单示例，你可以根据自己的需求进行进一步的优化和处理。 ### 回答3： 在使用axios进行文件下载请求时，可以设置responseType为blob来获取二进制数据作为响应。但是在这种情况下，由于后端错误的情况下，返回的响应数据类型可能依然是blob，而不是正常的json数据。因此，需要在前端代码中进行相应的处理来捕获后端错误。 首先，在axios请求中设置responseType为blob： ```javascript axios.get(url, { responseType: 'blob' }) ``` 之后，在返回的响应中，可以通过判断响应的Content-Type来确定响应数据类型。如果是对应的错误类型，则可以通过读取blob数据并进行相应的处理。 ```javascript axios.get(url, { responseType: 'blob' }).then(response => { const contentType = response.headers['content-type']; if (contentType === 'application/json') { // 正常情况 // 处理响应数据 } else { // 错误情况 response.blob().then(blobData => { // 处理错误数据 }); } }).catch(error => { // 请求错误 console.error(error); }); ``` 在错误情况下，使用response.blob()将blob数据转换为对应的Blob对象，并可以进行进一步的操作。比如，可以读取该Blob对象中的错误信息，并根据具体情况进行相应的处理，比如提示错误信息给用户或者进行其他的业务操作。 需要注意的是，设置responseType为blob时，后端返回的响应必须包含相应的Content-Type头部信息，以便前端能正确判断响应数据类型。否则，需要与后端进行沟通，确保正确返回对应的Content-Type信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值