流文件常见类型概览及前端 blob 文件下载简易封装

Blob 文件类型

拓展名 文件类型 MIME 类型
.aac AAC 音频 audio/aac
.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
.css CSS text/css
.csv CSV text/csv
.doc Microsoft Word application/msword
.docx Microsoft Word (OpenXML) application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eot MS 嵌入式 OpenType 字体 application/vnd.ms-fontobject
.epub 电子出版物(EPUB) application/epub+zip
.gif GIF image/gif
.htm 超文本标记语言 (HTML) text/html
.html 超文本标记语言 (HTML) text/html
.ico Icon 格式 image/vnd.microsoft.icon
.ics iCalendar 格式 text/calendar
.jar Java Archive (JAR) application/java-archive
.jpeg JPEG 图片 image/jpeg
.jpg JPEG 图片 image/jpeg
.js JavaScript text/javascript
.json JSON 格式 application/json
.jsonld JSON-LD 格式 application/ld+json
.mid 乐器数字接口(MIDI) audio/midi audio/x-midi
.midi 乐器数字接口(MIDI) audio/midi audio/x-midi
.mjs JavaScript 模块 text/javascript
.mp3 MP3 音频 audio/mpeg
.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
.png 便携式网络图形(PNG) image/png
.pdf PDF application/pdf
.ppt Microsoft PowerPoint application/vnd.ms-powerpoint
.pptx Microsoft PowerPoint (OpenXML) application/vnd.openxmlformats-officedocument.presentationml.presentation
.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
.xls Microsoft Excel application/vnd.ms-excel
.xlsx Microsoft Excel (OpenXML) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.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

简易 blob 下载文件封装

传入二进制流下载文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* blobData 流文件
* blobType 导出类型
* fileName 导出文件名称
* ..attr 其他信息
*/
export function dowloadBlobFile(blobData, blobType, fileName, ...attr) {
const blob = new Blob([blobData], {
type: blobType || "application/vnd.ms-excel",
})
const objectUrl = URL.createObjectURL(blob)
const link = document.createElement("a")
link.style.display = "none"
link.href = objectUrl
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}

传入链接下载文件

1
2
3
4
5
6
7
8
9
export function dowloadFile(url) {
const link = document.createElement("a")
link.style.display = "none"
link.href = url
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
link.remove()
}

Blob 和 Base64 互相转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// base64  to blob二进制
function dataURItoBlob(dataURI) {
const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0] // mime类型
const byteString = atob(dataURI.split(",")[1]) //base64 解码
const arrayBuffer = new ArrayBuffer(byteString.length) //创建缓冲数组
const intArray = new Uint8Array(arrayBuffer) //创建视图

for (let i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i)
}
return new Blob([intArray], { type: mimeString })
}

// blob二进制 to base64
function blobToDataURI(blob, callback) {
const reader = new FileReader()
reader.onload = function (e) {
callback(e.target.result)
}
reader.readAsDataURL(blob)
}