Blob文件导出：FileReader是否必需？✨

在现代 Web 开发中，文件的导出功能是许多系统中不可或缺的一部分。无论是导出 Excel、PDF 还是其他类型的二进制文件，前端都需要正确地处理后端返回的响应数据。其中，responseType: 'blob' 是一种常见的设置方式，它允许浏览器将服务器返回的原始字节流封装为一个 Blob 对象，从而支持文件下载等操作。📄💻

然而，在实际开发过程中，开发者常常会遇到一个问题：当使用 responseType: 'blob' 时，是否还需要引入 FileReader？尤其是在判断服务器返回的是文件内容还是错误信息时，这一问题显得尤为关键。🤔❓

一、FileReader 的作用与必要性 🧠🔍

在 responseType: 'blob' 的配置下，服务器返回的数据是一个 Blob 对象，而非字符串或 JSON 数据。这意味着我们不能直接对 Blob 进行 JSON 解析或文本处理。例如，若服务器返回了错误信息，但格式是 JSON，我们需要先将其转换为字符串，再进行解析。

这时，FileReader 就派上了用场。FileReader 是浏览器提供的一个 API，用于读取文件内容，包括从 Blob 中读取文本。其核心方法 readAsText(blob) 可以将 Blob 转换为字符串，使得后续的 JSON 解析成为可能。📄🔄

const reader = new FileReader();
reader.onload = function () {
  const text = reader.result;
  try {
    const json = JSON.parse(text);
    // 处理错误信息
  } catch (e) {
    // 处理文件流
  }
};
reader.readAsText(blob);

尽管如此，随着现代浏览器和 JavaScript 环境的发展，FileReader 已不再是唯一的选择。🧠⚡

二、更现代的写法：await blob.text() 🚀💡

在支持 Blob.prototype.text() 方法的环境中（如现代浏览器或 Node.js 18+），我们可以直接通过 await blob.text() 来读取 Blob 内容为字符串，而无需手动创建 FileReader 实例。这种方式不仅简化了代码逻辑，还提高了可读性和维护性。📝✅

const text = await blob.text();
try {
  const json = JSON.parse(text);
  message.error("导出失败：" + (json.msg || "导出失败"));
} catch (e) {
  // 处理文件流
}

这种写法的优势在于：

• 代码简洁：避免了 FileReader 的异步回调结构。🧩
• 兼容性良好：对于大多数现代项目来说，blob.text() 已被广泛支持。🌐
• 可读性强：逻辑清晰，易于理解和维护。📖

当然，如果你的项目需要兼容较老的浏览器环境（如 IE 或某些旧版移动端浏览器），则仍需依赖 FileReader 来实现相同的功能。🔧🛠️

三、不同 responseType 类型的处理方式 🧩📊

在实际开发中，responseType 的选择直接影响到如何处理服务器返回的数据。以下是几种常见 responseType 类型及其对应的处理方式：

1. responseType: 'text'

• 返回数据：字符串。
• 处理方式：直接使用返回的字符串，例如显示在页面上或进行字符串操作。💬

2. responseType: 'json'

• 返回数据：JavaScript 对象。
• 处理方式：像操作普通对象一样访问和操作数据。🪄

3. responseType: 'arraybuffer'

• 返回数据：ArrayBuffer 对象。
• 处理方式：使用类型数组（如 Uint8Array）或 DataView 解析二进制数据。⚙️

4. responseType: 'blob'

• 返回数据：Blob 对象。
• 处理方式：
  • 若需解析内容为文本或 JSON，可以使用 blob.text() 或 FileReader。
  • 若需下载文件，可使用 URL.createObjectURL(blob) 或直接通过 downloadByData 方法触发下载。📁

5. responseType: 'document'

• 返回数据：HTML 或 XML 文档对象。
• 处理方式：类似 DOM 操作，可访问文档节点和属性。📜

四、总结与建议 📌💡

在文件导出场景中，responseType: 'blob' 是处理二进制数据的标准做法。当需要判断服务器返回的是文件内容还是错误信息时，FileReader 曾经是必不可少的工具。但随着技术的进步，await blob.text() 提供了一种更简洁、更现代的替代方案。🎉

因此，针对不同项目需求和环境，我们可以灵活选择处理方式：

• 现代 Vue3/React 项目：推荐使用 await blob.text()，代码更简洁，逻辑更清晰。🚀
• 需要兼容老旧浏览器：仍需使用 FileReader 来确保功能稳定。🔧
• 统一处理策略：建议在导出函数中加入判断逻辑，根据响应内容动态决定是展示错误信息还是触发文件下载。⚖️

总之，理解 responseType 的工作原理以及相应的处理方式，有助于我们在实际开发中更高效、更可靠地实现文件导出功能。🌟🎯

业务代码：

//导出
const exportEvent = async (type) => {
  try {
    const biz_content = {
      depId: infoStore.infoKey,
    };
    const url = type == "process" ? "/shbg/electric/room/exportExcel/process" : "/shbg/modelshortcircuit/export/excel";

    const res = await http.request("post", url, {
      data: JSON.stringify(biz_content),
      responseType: "blob",
    });

    if (res.status === 200) {
      // 先尝试读取 blob 的内容
      const blob = res.data;
      // 判断是不是 JSON
      const reader = new FileReader();
      reader.onload = function () {
        try {
          // 尝试解析为 JSON
          const json = JSON.parse(reader.result);
          // 如果能解析，说明是错误信息
          message.error("导出失败：" + json.msg || "导出失败");
        } catch (e) {
          // 解析失败，说明是文件流，正常下载
          const regex = /filename=([^;]+)/;
          const match = res.headers["content-disposition"].match(regex);
          const filename = match ? decodeURIComponent(match[1]) : "系统短路模型.xlsx";
          downloadByData(blob, filename);
          message.success("导出成功");
        }
      };
      reader.readAsText(blob);
    }
  } catch (error) {
    message.error("导出失败：" + error.message);
  }
};