博客
关于我
new Blob()实现不同类型的文件下载功能
阅读量:789 次
发布时间:2023-02-15

本文共 3146 字,大约阅读时间需要 10 分钟。

new Blob() 实现不同类型文件的下载功能

在前端开发过程中,文件下载是常见需求之一。通过 new Blob() 创建二进制数据,并结合不同的 MIME 类型,可以实现多种文件类型的下载。以下是常用文件类型及其对应的 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
.pdf PDF 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);});

注意事项

  • MIME 类型的准确性:确保提供的 MIME 类型与实际文件类型一致,避免使用错误的类型。
  • 兼容性问题:不同浏览器对某些 MIME 类型的支持可能存在差异,需根据具体需求进行测试。
  • 权限问题:确保前端脚本有足够的权限来创建和下载文件,避免跨域问题。

通过以上方法,可以实现多种文件类型的下载,满足不同应用场景的需求。

转载地址:http://kxcfk.baihongyu.com/

你可能感兴趣的文章