流文件常见类型概览及前端 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
|
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
| function dataURItoBlob(dataURI) { const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0] const byteString = atob(dataURI.split(",")[1]) 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 }) }
function blobToDataURI(blob, callback) { const reader = new FileReader() reader.onload = function (e) { callback(e.target.result) } reader.readAsDataURL(blob) }
|