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

已于 2024-10-18 12:31:57 修改
阅读量9.5k 收藏 61
点赞数 10
分类专栏： js基础代码 文章标签： microsoft
于 2022-12-08 20:31:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_yupeng/article/details/128242933
版权

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

后缀名文件类型类型（type）
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.csvCSVtext/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.pdfPDFapplication/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformats-officedocument.presentationml.presentation
.png便携式网络图形（PNG）image/png
.gifGIFimage/gif
.jpegJPEG 图片image/jpeg
.jpgJPEG 图片image/jpeg
.mp3MP3 音频audio/mpeg
.aacAAC 音频audio/aac
.html超文本标记语言 (HTML)text/html
.cssCSStext/css
.jsJavaScripttext/javascript
.jsonJSON 格式application/json
.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
.eotMS嵌入式OpenType字体application/vnd.ms-fontobject
.epub电子出版物(EPUB)application/epub+zip
.icoIcon 格式image/vnd.microsoft.icon
.icsiCalendar 格式text/calendar
.jarJava Archive (JAR)application/java-archive
.jsonldJSON-LD 格式application/ld+json
.mid乐器数字接口(MIDI)audio/midi audio/x-midi
.midi乐器数字接口(MIDI)audio/midi audio/x-midi
.mjsJavaScript 模块text/javascript
.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
.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
.ttfrueType 字体font/ttf
.txtTexttext/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wav波形音频格式audio/wav
.webaWEBM 音频audio/webm
.webmEBM 视频video/webm
.webpWEBP 图片image/webp
.woff网页开放字体格式 (WOFF)font/woff
.woff2网页开放字体格式 (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.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-zip

application/x-7z-compressed

Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程，前端下载后端接口返回的文件流并自动保存到本地，支持任何格式的文件下载（从后端拿到二进制文件流 Blob 对象，前端实现点击下载功能）
王二红
12-19 1万+
vue3，vue3blob对象下载，vue3下载二进制文件流，下载blob二进制文件，vue3调用接口获取二进制文件流如何下载到本地，下载图片图像excelwordpdfppt文件，vue3请求后端接口得到一大堆乱码怎么将文件下载出来，前端vue3使用blob下载流文件，vue3获取后端的Blob文件流下载文件，vue3通过blob下载流文件，vue3下载Blob文件,vue3后端返回二进制流-前端通过blob对象下载文件-图片，vue3实现文件下载功能，Vue3中利用Blob对象实现下载文件的超详
Blob 下载类型 type 大全
MoXinXueWEB的博客
05-06 4672
小菜鸟在整理
Blob 文件流下载 type类型
weixin_43550766的博客
12-17 1万+
aacAAC audioaudio/aac.abwAbiWord documentapplication/x-abiword.arcArchive document (multiple files embedded)application/x-freearc.aviAVI: Audio Video Interleavevideo/x-msvideo.azwAmazon Kindle e...
js文件流下载Blob 类型type设置
m0_46822439的博客
11-13 3281
new Blob([res.msg])类型。
vue 下载blob类型文件 到本地
最新发布
qq_18595715的博客
03-26 161
vue 下载xlsx 图片等文件到本地
new Blob()实现不同类型的文件下载功能
夜空孤狼啸的博客
04-02 3203
在前端项目实际开发过程中，经常需要对各种各样的类型进行下载，因为我不是前端出生，就自己在网上学习最后使用到自己的项目当中，代码冗余等低级错误还请多多指导。我发现用 Blob 二进制进行文件下载的比较多，我就采用了这一方式。下面是一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。
Vue项目 使用new Blob() 对后端返回文件流下载导出文件时不同文件类型的 type （zip/excel）值封装调用示例(即文件流转Blob格式实现下载excel或zip)
wocwin的博客
08-24 3734
Vue项目 使用new Blob() 对后端返回文件流下载导出文件时不同文件类型的 type （zip/excel）值封装调用示例(即文件流转Blob格式实现下载excel或zip)
Vue 之 利用new Blob() 对后端返回文件流 或 base64字符串下载导出文件时不同文件类型的 type 值整理及函数封装调用示例
热门推荐
zhuang的博客
10-31 2万+
在 Vue 项目中，经常用 Blob 二进制进行文件下载功能，涉及不同后缀名的文件，这里整理一份 Blob 的配置关系对应表，在我们使用Blob做下载功能时 ，根据需要下载的文件类型修改 type 值进行下载即可。 后缀名文件类型类型（type） .aacAAC 音频audio/aac .abwAbiWord 文档application/x-abiword .arc存档文档(多个文件嵌入)applica...
vue-以文件流-blob-的形式-下载-导出文件操作
10-14
总的来说，Vue中以文件流-Blob形式下载导出文件的关键步骤包括：设置请求响应类型为`blob`、获取文件流、构造Blob对象、生成URL并触发下载。为了确保良好的跨浏览器兼容性，可能需要针对不同的浏览器实现不同的下载...
VUE3+TS中实现blob文件流下载功能
weixin_73610394的博客
06-20 1569
VUE3+TS中实现blob文件流下载功能
Vue利用Blob下载原生二进制数组文件
10-16
总的来说，Vue利用Blob下载原生二进制数组文件的过程涉及数据转换、Blob对象创建、下载链接生成以及触发下载操作。理解这个过程对于处理二进制数据的前端开发者来说非常重要，因为这允许用户直接在浏览器中下载来自...
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
01-19
var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessi
Vue 前端导出、下载zip excel文件流blob_vue new blob 大量数据(1)
kenzsoft的博客
05-10 1007
link.download = “模板下载”;大纲路线、讲解视频，并且后续会持续更新**// 导出execel2。才能获取到文件名等信息。
【前端】Vue之使用new Blob() 实现不同类型的文件下载
m0_64210833的博客
04-17 6213
前端实现下载不同类型的文件，内含详细代码进行测试。
Blob文件类型type值
weixin_48046344的博客
10-19 539
后缀名 文件类型 类型（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 a
HTML+JS 通过file对象选择文件
m0_57970861的博客
10-30 410
HTML+JS 通过file对象选择文件
前端常用下载new Blob()type类型（.pdf，.png，.doc，.xls，.xlsx，.js，.mps，.gif，.docx，.jpeg）
Deardhf的博客
07-24 1447
前端常用下载new Blob()type类型（.pdf，.png，.doc，.xls，.xlsx，.js，.mps，.gif，.docx，.jpeg）
vue中使用文件流进行下载(new Blob)
前端打工人的博客
06-01 4964
这里以后台传过来的流文件（如excel）并设置下载文件名 // 利用a标签自定义下载文件名 const link = document.createElement('a') axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => { // 创建Blob对象，设置文件类型 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}
vue中blob流文件下载
06-11
在 Vue 中下载 Blob 流文件，可以使用如下代码： ```javascript axios({ url: 'your-api-url', method: 'get', responseType: 'blob' // 表示返回类型为 Blob }).then(res => { const content = res.data; const blob = new Blob([content]); const fileName = 'file.xlsx'; // 文件名 const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; // 下载文件名 link.click(); window.URL.revokeObjectURL(link.href); }); ``` 在上面的代码中，我们将响应类型设置为 `blob`，接收到响应后，先将数据转为 Blob 对象，然后手动创建一个下载链接，设置文件名及格式后触发点击事件下载文件。注意，最后需要调用 `window.URL.revokeObjectURL` 方法释放掉链接。 如果你使用的是 Vue 3.0，可以将上面的代码封装成一个自定义指令： ```javascript // 需要在 main.js 中引入该文件 import { createApp } from 'vue'; import App from './App.vue'; import download from './directives/download'; // 自定义下载指令 const app = createApp(App); app.directive('download', download); app.mount('#app'); ``` ```javascript // download.js export default { mounted(el, binding) { const { url, fileName } = binding.value; el.addEventListener('click', () => { fetch(url) .then(res => res.blob()) .then(blob => { const link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); }); }); } }; ``` 在 Vue 3.0 中，自定义指令的定义方式与 Vue 2.x 有所不同。在上面的代码中，我们定义了一个名为 `download` 的自定义指令，它接收一个对象作为参数，包含了需要下载的文件的 URL 和文件名。在指令的 `mounted` 钩子函数中，我们监听元素的点击事件，并通过 `fetch` 方法获取文件数据，将其转为 Blob 对象，创建下载链接并触发点击事件下载文件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值