本文共 3146 字,大约阅读时间需要 10 分钟。
在前端开发过程中,文件下载是常见需求之一。通过 new Blob() 创建二进制数据,并结合不同的 MIME 类型,可以实现多种文件类型的下载。以下是常用文件类型及其对应的 MIME 类型及实现方法。
以下是几种常见文件类型及其对应的 MIME 类型:
| 文件后缀 | 文件类型 | MIME 类型 |
|---|---|---|
| .xls | Excel | application/vnd.ms-excel |
| .xlsx | Excel (OpenXML) | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .tsv | TSV | text/tsv |
| .csv | CSV | text/csv |
| .doc | Word | application/msword |
| .docx | Word (OpenXML) | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| application/pdf | ||
| .ppt | PowerPoint | application/vnd.ms-powerpoint |
| .pptx | 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 | RAR | application/x-freearc |
| .avi | AVI | video/x-msvideo |
| .azw | Kindle | application/vnd.amazon.ebook |
| .bin | 二进制数据 | application/octet-stream |
| .bmp | BMP | image/bmp |
| .bz | BZip | application/x-bzip |
| .bz2 | BZip2 | application/x-bzip2 |
| .csh | CShell | application/x-csh |
| .eot | EOT | application/vnd.ms-fontobject |
| .epub | EPUB | application/epub+zip |
| .htm | HTML | text/html |
| .ico | ICO | image/vnd.microsoft.icon |
| .ics | iCalendar | text/calendar |
| .jar | 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 | Apple 安装包 | application/vnd.apple.installer+xml |
| .odp | ODP | application/vnd.oasis.opendocument.presentation |
| .ods | ODS | application/vnd.oasis.opendocument.spreadsheet |
| .odt | ODT | application/vnd.oasis.opendocument.text |
| .oga | OGA | audio/ogg |
| .ogv | OGV | 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 | SWF | application/x-shockwave-flash |
| .tar | TAR | application/x-tar |
| .tif | TIFF | image/tiff |
| .tiff | TIFF | image/tiff |
| .ttf | TrueType 字体 | font/ttf |
| .txt | 文本文件 | text/plain |
| .vsd | Visio | application/vnd.visio |
| .wav | 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 |
| .xul | XUL | application/vnd.mozilla.xul+xml |
| .zip | ZIP | application/zip |
| .tar.gz | tar.gz | application/x-compressed-tar |
| .3gp | 3GPP | video/3gpp、audio/3gpp(不含视频) |
| .3g2 | 3GPP2 | video/3gpp2、audio/3gpp2(不含视频) |
| .7z | 7-zip | application/x-7z-compressed |
以下是基于 new Blob() 实现不同文件类型下载的代码示例:
// 下载 .xlsx 文件Api.hivMeta().then((res) => { const link = document.createElement('a'); const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); link.style.display = 'none'; link.href = URL.createObjectURL(blob); link.download = 'hiv_trace_meta.xlsx'; document.body.appendChild(link); link.click(); window.URL.revokeObjectURL(link.href);}); 通过以上方法,可以实现多种文件类型的下载,满足不同应用场景的需求。
转载地址:http://kxcfk.baihongyu.com/