后端返回文件流，前端如何下载

最新推荐文章于 2025-06-20 11:45:36 发布

原创最新推荐文章于 2025-06-20 11:45:36 发布 · 802 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #前端

如何在前端实现Excel文件下载：Blob处理与文件名解码详解

在前端开发中，文件下载是一个常见需求，尤其是在导出Excel数据报表的场景。本文将详细介绍如何使用Blob对象处理二进制流数据并正确解码中文文件名，以解决常见的乱码问题。

核心代码实现

// 省略了代码中的具体业务逻辑，主要突出关键的Blob处理和文件名解码部分

function exportExcel() {
  // 设置请求参数...
  
  mallapiOrderinfoDownFile(params, { responseType: 'blob' })
    .then(response => {
      const blob = new Blob([response.data], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
      });
      
      const downloadUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = downloadUrl;

      const fileName = decodeURIComponent(
        response.headers['content-disposition']?.split('filename=')[1] || '默认文件名.xlsx'
      );

      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(link);
    })
    .catch(error => {
      console.error('导出失败:', error);
      proxy.$message.error("导出失败");
    });
}

关键技术点解析

1. responseType: 'blob'的作用

设置responseType: 'blob'可确保获取到的是二进制流数据，适用于文件下载场景，其中也必须要写入，其可以通过设置一个XMLHttpRequest对象的 responseType属性来改变一个从服务器上返回的响应的数据类型，当时没有规定responseType类型导致下载后的文件出现了乱码的情况。

2. Blob对象与MIME类型

创建Blob对象时，需指定正确的MIME类型，以确保浏览器能正确解析文件内容，以下是一些常见的MIME类型及其用途：

文本文件:
   text/plain: 纯文本文件
   text/html: HTML 文件
   text/css: CSS 样式表
   text/javascript: JavaScript 文件
图像文件:
   image/jpeg: JPEG 图像文件
   image/png: PNG 图像文件
   image/gif: GIF 图像文件
   image/svg+xml: SVG 图像文件
音频文件:
   audio/mpeg: MP3 音频文件
   audio/ogg: Ogg 音频文件
   audio/wav: WAV 音频文件
视频文件:
   video/mp4: MP4 视频文件
   video/webm: WebM 视频文件
   video/ogg: Ogg 视频文件
应用文件:
   application/pdf: PDF 文件
   application/zip: ZIP 压缩文件
   application/json: JSON 数据
   application/xml: XML 数据
   application/octet-stream: 二进制流数据（通常用于下载任意类型的文件）
Microsoft Office 文件:
   application/vnd.ms-excel: Excel 文件（.xls）
   application/vnd.openxmlformats-officedocument.spreadsheetml.sheet: Excel 文件（.xlsx）
   application/msword: Word 文件（.doc）
   application/vnd.openxmlformats-officedocument.wordprocessingml.document: Word 文件（.docx）
   application/vnd.ms-powerpoint: PowerPoint 文件（.ppt）
   application/vnd.openxmlformats-officedocument.presentationml.presentation: PowerPoint 文件
其他文件类型:
   application/font-woff: WOFF 字体文件
   application/font-sfnt: TrueType 字体文件
   application/x-shockwave-flash: Flash 文件

3. 中文文件名解码处理

代码中的【fileName】：指的是我们在下载文件的时候名称取得是什么，其中用到了decodeURIComponent因为他是将返回的解析为字符集，其中解码的方法一般有decodeURI()和decodeURIComponent(),其中 decodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而 decodeURIComponent 则会对它发现的任何非标准字符进行编码，所以一般我们去使用encodeURIComponent去进行解码，通过解码Content-Disposition头中的文件名，可以正确显示包含中文字符的文件名。