Vue 之 利用new Blob() 对后端返回文件流 或 base64字符串下载导出文件时不同文件类型的 type 值整理及函数封装调用示例
在 Vue 项目中,经常用 Blob 二进制进行文件下载功能,涉及不同后缀名的文件,这里整理一份 Blob 的配置关系对应表,在我们使用Blob做下载功能时 ,根据需要下载的文件类型修改 type 值进行下载即可。后缀名文件类型类型(type).aacAAC 音频audio/aac.abwAbiWord 文档application/x-abiword.arc存档文档(多个文件嵌入)applica.
·
mimeType类型字符串对应整理以及文件流、base64字符串下载文件函数封装
在 Vue 项目中,经常用 Blob 二进制进行文件下载功能(vue后台返回文件流下载导出函数封装、后台返回base64字符串下载导出函数封装、调用示例),涉及不同后缀名的文件,这里整理一份 Blob 的配置关系对应表,在我们使用Blob做下载功能时 ,根据需要下载的文件类型修改 type 值进行下载即可。
文件后缀名、文件类型、mimeType值对应关系表
后缀名 | 文件类型 | 类型(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 | application/msword |
.docx | Microsoft Word (OpenXML) | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
application/pdf | ||
.ppt | Microsoft PowerPoint | application/vnd.ms-powerpoint |
.pptx | Microsoft PowerPoint (OpenXML) | application/vnd.openxmlformats-officedocument.presentationml.presentation |
.png | 便携式网络图形(PNG) | image/png |
.gif | GIF | image/gif |
.jpeg | JPEG 图片 | image/jpeg |
.jpg | JPEG 图片 | image/jpeg |
.mp3 | MP3 音频 | audio/mpeg |
.aac | AAC 音频 | audio/aac |
.html | 超文本标记语言 (HTML) | text/html |
.css | CSS | text/css |
.js | JavaScript | text/javascript |
.json | JSON 格式 | application/json |
.abw | AbiWord 文档 | application/x-abiword |
.arc | 存档文档(多个文件嵌入) | application/x-freearc |
.avi | AVI: 音频视频交错 | video/x-msvideo |
.azw | 亚马逊Kindle电子书格式 | application/vnd.amazon.ebook |
.bin | 任何类型的二进制数据 | application/octet-stream |
.bmp | Windows OS/2位图图形 | image/bmp |
.bz | BZip 存档 | application/x-bzip |
.bz2 | BZip2 存档 | application/x-bzip2 |
.csh | C-Shell 脚本 | application/x-csh |
.eot | MS嵌入式OpenType字体 | application/vnd.ms-fontobject |
.epub | 电子出版物(EPUB) | application/epub+zip |
.htm | 超文本标记语言 (HTML) | text/html |
.ico | Icon 格式 | image/vnd.microsoft.icon |
.ics | iCalendar 格式 | text/calendar |
.jar | Java Archive (JAR) | application/java-archive |
.jsonld | JSON-LD 格式 | application/ld+json |
.mid | 乐器数字接口(MIDI) | audio/midi audio/x-midi |
.midi | 乐器数字接口(MIDI) | audio/midi audio/x-midi |
.mjs | JavaScript 模块 | text/javascript |
.mpeg | MPEG 视频 | video/mpeg |
.mpkg | 苹果安装程序包 | application/vnd.apple.installer+xml |
.odp | OpenDocument演示文档 | application/vnd.oasis.opendocument.presentation |
.ods | OpenDocument 电子表格文件 | application/vnd.oasis.opendocument.spreadsheet |
.odt | OpenDocument 文本文档 | application/vnd.oasis.opendocument.text |
.oga | OGG 音频 | audio/ogg |
.ogv | OGG 视频 | video/ogg |
.ogx | OGG | application/ogg |
.otf | OpenType 字体 | font/otf |
.rar | RAR 存档 | application/x-rar-compressed |
.rtf | 富文本格式 (RTF) | application/rtf |
.sh | Bourne shell 脚本 | application/x-sh |
.svg | 可缩放矢量图形 (SVG) | image/svg+xml |
.swf | 小型web格式 (SWF) or Adobe Flash document | application/x-shockwave-flash |
.tar | Tape 归档(TAR) | application/x-tar |
.tif | 标记图像文件格式 (TIFF) | image/tiff |
.tiff | Tagged Image File Format (TIFF) | image/tiff |
.ttf | TrueType 字体 | font/ttf |
.txt | Text | text/plain |
.vsd | Microsoft Visio | application/vnd.visio |
.wav | 波形音频格式 | audio/wav |
.weba | WEBM 音频 | audio/webm |
.webm | WEBM 视频 | video/webm |
.webp | WEBP 图片 | image/webp |
.woff | 网页开放字体格式 (WOFF) | font/woff |
.woff2 | 网页开放字体格式 (WOFF) | font/woff2 |
.xhtml | XHTML | application/xhtml+xml |
.xml | XML | application/xml(普通用户不可读)、text/xml(普通用户可读) |
.xul | XUL | application/vnd.mozilla.xul+xml |
.zip | ZIP | application/zip |
.3gp | 3GPP audio/video 容器 | video/3gpp、audio/3gpp(不含视频) |
.3g2 | 3GPP2 audio/video 容器 | video/3gpp2、audio/3gpp2(不含视频) |
.7z | 7-zip | application/x-7z-compressed |
函数封装
为 此,将 工 作 中 常 用 的 公 共 方 法 封 装 整 理 了 一 份(不定时更新)点击此处查看
这里可以将这些公共方法全部写在一个 publicMethods.js
文件中,然后在 main.js
文件中引入,并抛给 vue
原型,然后这样的好处就是,不管在哪个 vue
文件中,都能通过 this.xxx.xxx
的方式调用封装的公共方法;
publicMethods.js
// 创建一个a标签,并做点击下载事件
function downloadFile(hrefUrl, fileName){
let a = document.createElement('a')
a.href = hrefUrl
a.download = fileName // 下载后文件名
document.body.appendChild(a)
a.click() // 点击下载
document.body.removeChild(a) // 下载完成移除元素
}
// 封装blob对象
function dataURLToBlob(base64Str, mimeTypeStr) {
let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串,base-64 编码使用方法是 btoa()
let length = bstr.length;
let u8arr = new Uint8Array(length); // 创建初始化为0的,包含length个元素的无符号整型数组
while (length--) {
u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
}
return new Blob([u8arr], { type: mimeTypeStr }); // 返回一个blob对象
}
// 后端返回base64公共导出
function downloadFileByBase64(base64Str, mimeTypeStr, fileName){
let myBlob = dataURLToBlob(base64Str, mimeTypeStr)
let myUrl = window.URL.createObjectURL(myBlob)
downloadFile(myUrl, fileName)
}
// 后端返回文件流公共导出
function downloadFileByFileFlow(blobData, mimeTypeStr, fileName) {
let blob = new Blob([blobData], { type: mimeTypeStr })
let hrefUrl = window.URL.createObjectURL(blob) // 创建下载的链接
downloadFile(hrefUrl, fileName);
}
main.js
import publicMethod from './utils/publicMethods.js';
Vue.prototype.$public = publicMethod;
相应的vue文件中
// res为后端返回的base64字符串
this.$public.downloadFileByBase64(res, 'application/vnd.ms-excel', '订单明细');
// res为后端返回的文件流
this.$public.downloadFileByFileFlow(res, 'application/vnd.ms-excel', '订单明细');
如有不足,望大家多多指点! 谢谢!
更多推荐
已为社区贡献13条内容
所有评论(0)