解决JS导出Excel文件乱码问题：responseType与responseEncoding的正确配置-CSDN博客

1. 为什么你导出的Excel文件总是一团乱码？

相信很多前端小伙伴都遇到过这个让人抓狂的场景：你吭哧吭哧写好了导出功能，后端接口也调通了，浏览器里看着请求也成功了，甚至文件都下载下来了。结果，你满心欢喜地双击那个 .xlsx 文件，Excel 弹出来的不是整齐的表格，而是一堆火星文，或者干脆冷冰冰地告诉你“文件格式或文件扩展无效”。

那一刻，是不是感觉血压都上来了？我明明下载的是文件啊，数据也对，怎么打开就废了呢？别急，这几乎可以算是前端文件下载的“必修课”了，问题十有八九出在你请求的“姿势”不对。简单来说，就是你的浏览器和后端在“交接”文件数据时，对数据的理解出现了偏差。

想象一下这个流程：后端说：“嗨，这是你要的Excel文件数据。” 然后它把一堆二进制数据（也就是文件最原始的样子）通过网络传给你。你的浏览器（或者更具体点，是你写的JavaScript代码）收到了这堆数据。这时候，关键问题来了：浏览器怎么处理这堆数据？是把它当成普通的文本字符串来解读，还是原封不动地当成一个“文件块”来接收？

如果你没有明确告诉浏览器：“嘿，这是二进制文件，别乱动！” 浏览器就会很“热心”地尝试用默认的字符编码（比如 UTF-8）去解析这堆二进制流。Excel文件本质上是一个压缩包，里面是XML等结构化数据，被当成文本一解码，立马就面目全非。这就是乱码的根源。而“文件格式无效”的报错，则是因为解码后的数据破坏了文件原有的结构，导致Excel这个“验货员”一看就不对劲，直接拒收。

所以，解决这个问题的核心钥匙，就在于两个关键的配置参数：responseType 和 responseEncoding。它们就像是给浏览器下达的精确指令，告诉它应该如何接收和处理来自服务器的响应数据。接下来，我们就来彻底搞懂这两个参数，让你从此告别导出乱码。

2. 深入理解 responseType：告诉浏览器你要什么“货”

responseType 是 XMLHttpRequest 或 Fetch API 中（以及基于它们封装的Axios等库）一个至关重要的属性。它的作用非常直接：预先告知浏览器你期望服务器返回的响应数据是什么类型。浏览器知道了你的期望，就会用对应的方式来处理响应体。

这个参数有几个常用的值，每个值都对应着不同的数据处理模式：

"" (默认值) 或 "text"：告诉浏览器，“我期待一个文本字符串”。浏览器会把接收到的数据当作文本，并用默认或指定的字符编码进行解码。这对于接收JSON、HTML、XML等文本数据是完美的。但用来接收文件？那就是灾难的开始。
"arraybuffer"：告诉浏览器，“给我原始的二进制数据，存成一个 ArrayBuffer 对象”。ArrayBuffer 是一块通用的、固定长度的原始二进制数据缓冲区。你可以通过 TypedArray（如 Uint8Array）或 DataView 来操作它。这是处理二进制文件（如图片、PDF、Excel）的基础方式之一。
"blob"：这是我们今天的主角之一。Blob (Binary Large Object) 对象代表一个不可变、原始数据的类文件对象。简单理解，responseType: "blob" 就是在对浏览器说：“别解析，直接把响应当成一个完整的文件对象给我包好。” Blob 对象非常方便，因为它可以直接用于创建下载链接（URL.createObjectURL(blob)），或者通过 FileReader 读取内容。

那么，在导出Excel的场景下，为什么首选 "blob" 而不是 "arraybuffer" 呢？这主要是出于便捷性和语义的考虑。当我们说“下载一个文件”时，我们脑海中的概念更接近于一个完整的“文件对象”（Blob），而不是一坨需要手动处理的二进制缓冲区（ArrayBuffer）。Blob 可以直接与 <a> 标签的 download 属性配合，实现一键下载，代码更简洁直观。

让我们看一个具体的对比。假设我们使用 Axios 来调用导出接口：

// 错误示范：使用默认的 text 类型接收文件
axios.post('/api/export-excel', params)
  .then(response => {
    // 此时 response.data 是一个被错误解码的字符串，已经损坏
    const blob = new Blob([response.data]); // 用损坏的数据创建Blob，徒劳无功
    // ... 后续下载操作必然失败
  });

// 正确示范：明确指定 responseType 为 blob
axios.post('/api/export-excel', params, {
  responseType: 'blob' // 关键配置！
}).then(response => {
  // 此时 response.data 直接就是一个可用的 Blob 对象
  const url = window.URL.createObjectURL(response.data);
  const link = document.createElement('a');
  link.href = url;
  link.download = '报表.xlsx';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url); // 释放内存
});

看到区别了吗？第一个例子中，Ax