Blob文件流下载写法及type类型汇总

一、接口写法

export function downLoadFireFile(params) {
    return request({
        url: 'api/file/downLoadFile',
        method: 'get',
        params: { filename: params },
        async: true,
        responseType: "blob",
    })
}

二、代码写法

downLoadFireFile(this.downloadFileName).then((res) => {
   const url = window.URL.createObjectURL(
     new Blob([res], { type: docType })
   );
   const link = document.createElement("a");
   link.style.display = "none";
   link.href = url;
   let zipName = this.docName + docSuffix
   link.setAttribute("download", zipName);
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
})
 .catch((err) => {
   console.log(err);
  }).catch((e) => {
   console.log(e)
 })

三、类型汇总

文件后缀类型写法
.aacAAC audioaudio/aac
.abwAbiWord documentapplication/x-abiword
.arcArchive document (multiple files embedded)application/x-freearc
.aviAVI: Audio Video Interleavevideo/x-msvideo
.azwAmazon Kindle eBook formatapplication/vnd.amazon.ebook
.binAny kind of binary dataapplication/octet-stream
.bmpWindows OS/2 Bitmap Graphicsimage/bmp
.bzBZip archiveapplication/x-bzip
.bz2BZip2 archiveapplication/x-bzip2
.cshC-Shell scriptapplication/x-csh
.cssCascading Style Sheets (CSS)text/css
.csvComma-separated values (CSV)text/csv
.docMicrosoft Wordapplication/msword
.docxMicrosoft Word (OpenXML)application/vnd.openxmlformats-officedocument.wordprocessingml.document
.eotMS Embedded OpenType fontsapplication/vnd.ms-fontobject
.epubElectronic publication (EPUB)application/epub+zip
.gifGraphics Interchange Format (GIF)image/gif
.htm.htmlHyperText Markup Language (HTML)text/html
.icoIcon formatimage/vnd.microsoft.icon
.icsiCalendar formattext/calendar
.jarJava Archive (JAR)application/java-archive
.jpeg.jpgJPEG imagesimage/jpeg
.jsJavaScripttext/javascript
.jsonJSON formatapplication/json
.jsonldJSON-LD formatapplication/ld+json
.mid.midiMusical Instrument Digital Interface (MIDI)audio/midi audio/x-midi
.mjsJavaScript moduletext/javascript
.mp3MP3 audioaudio/mpeg
.mpegMPEG Videovideo/mpeg
.mpkgApple Installer Packageapplication/vnd.apple.installer+xml
.odpOpenDocument presentation documentapplication/vnd.oasis.opendocument.presentation
.odsOpenDocument spreadsheet documentapplication/vnd.oasis.opendocument.spreadsheet
.odtOpenDocument text documentapplication/vnd.oasis.opendocument.text
.ogaOGG audioaudio/ogg
.ogvOGG videovideo/ogg
.ogxOGGapplication/ogg
.otfOpenType fontfont/otf
.pngPortable Network Graphicsimage/png
.pdfAdobe Portable Document Format (PDF)application/pdf
.pptMicrosoft PowerPointapplication/vnd.ms-powerpoint
.pptxMicrosoft PowerPoint (OpenXML)application/vnd.openxmlformatsofficedocument.presentationml.presentation
.rarRAR archiveapplication/x-rar-compressed
.rtfRich Text Format (RTF)application/rtf
.shBourne shell scriptapplication/x-sh
.svgScalable Vector Graphics (SVG)image/svg+xml
.swfSmall web format (SWF) or Adobe Flash documentapplication/x-shockwave-flash
.tarTape Archive (TAR)application/x-tar
.tif .tiffTagged Image File Format (TIFF)image/tiff
.ttfTrueType Fontfont/ttf
.txtText, (generally ASCII or ISO 8859-n)text/plain
.vsdMicrosoft Visioapplication/vnd.visio
.wavWaveform Audio Formataudio/wav
.webaWEBM audioaudio/webm
.webmWEBM videovideo/webm
.webpWEBP imageimage/webp
.woffeb Open Font Format (WOFF)font/woff
.woff2Web Open Font Format (WOFF)font/woff2
.xhtmlXHTMLapplication/xhtml+xml
.xlsMicrosoft Excelapplication/vnd.ms-excel
.xlsxMicrosoft Excel (OpenXML)application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet
.xmlXMLapplication/xml 代码对普通用户来说不可读 text/xml 代码对普通用户来说可读
.xulXULapplication/vnd.mozilla.xul+xml
.zipZIP archiveapplication/zip
.3gp3GPP audio/video containervideo/3gpp audio/3gpp(若不含视频)
.3g23GPP2 audio/video containervideo/3gpp2 audio/3gpp2(若不含视频)
.7z7-zip archiveapplication/x-7z-compressed

参考文章:Blob 文件流下载 type类型

### 如何使用Blob流实现文件下载 #### 创建Blob对象并触发下载 为了创建一个可以用于下载的`Blob`对象,首先需要准备要下载的数据。这些数据可能是来自服务器响应的内容或者是前端生成的一些结构化数据。 对于简单的文本文件或其他已知编码格式的小型文件来说,可以直接构建字符串形式的数据作为`Blob`构造函数的第一个参数传递进去: ```javascript // 构建一些简单文本内容 const content = "这是一些测试文字"; // 定义MIME类型为纯文本 const blob = new Blob([content], { type: 'text/plain' }); ``` 当涉及到更复杂的情况比如Word文档、Excel表格或者其他二进制格式时,则通常是从服务端获取到相应的字节序列之后再转换成`Blob`对象。此时应该注意设置正确的MIME类型来确保浏览器能够识别所下载文件的实际格式[^1]。 一旦有了`Blob`对象就可以利用HTML5提供的API来进行实际的下载动作了。下面是一个完整的例子展示如何将上述定义好的`Blob`保存成本地文件: ```html <!-- HTML部分 --> <a id="downloadLink" style="display:none;"></a> <script> function triggerDownload(blob, filename){ // 获取页面中的隐藏链接元素 const link = document.getElementById('downloadLink'); // 设置链接的目标URL指向由传入的blob对象生成的对象URL link.href = URL.createObjectURL(blob); // 给链接指定下载后的文件名 link.download = filename; // 执行点击事件模拟用户交互行为从而启动下载过程 link.click(); // 清理不再使用的Object URL以释放内存资源 setTimeout(() => { window.URL.revokeObjectURL(link.href); }, 0); } // 测试用法 const testContent = "你好世界!"; const testBlob = new Blob([testContent], {type : 'text/plain'}); triggerDownload(testBlob,"hello.txt"); </script> ``` 这段脚本展示了怎样动态创建一个临时的锚点(`<a>`)标签并通过JavaScript编程方式触发展开文件下载对话框的过程。这里的关键在于使用了`window.URL.createObjectURL()`方法把给定的`Blob`对象转化为可以在当前窗口打开的有效地址;而`link.download`属性则决定了最终被保存下来的文件名称[^3]。 另外,在Vue.js这样的现代框架中也可以很方便地集成这种基于`Blob`的文件处理逻辑。例如,在发起HTTP请求获得远程资源后立即将其转存为客户机上的本地副本[^4]: ```javascript axios({ method: 'get', url: `${baseURL}/api/excel`, responseType: 'arraybuffer' }).then(response => { const blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}) const link = document.createElement('a') link.href = window.URL.createObjectURL(blob) link.download = 'example.xlsx' document.body.appendChild(link) link.click() document.body.removeChild(link) setTimeout(function () { window.URL.revokeObjectURL(url) }, 100); }) ``` 此片段说明了一个典型的场景——从后台接口拉取Excel工作簿,并立即提供给访客进行下载。值得注意的地方有两点:一是指定了恰当的`responseType`选项使得Ajax库能正确解析返回来的二进制数据;二是选择了适合于目标文件扩展名(`xlsx`)对应的媒体类型描述符[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值