处理 Blob 类型文件下载问题总结

在项目中导出 Excel 文件时，曾遇到文件下载后打开显示错误或者无法正常打开的问题。经过排查，发现问题主要由以下两个方面引起：

问题描述

浏览器数据解析错误
- 默认情况下，浏览器可能将返回的数据按文本或 JSON 格式解析，即使后端实际返回的是二进制数据。
- 如果数据在网络传输过程中被错误解析，即使前端后续使用 new Blob 处理，也无法恢复为完整的二进制文件。
HTTP 头信息设置不当
- 未设置正确的 Content-Type，使得浏览器不知道如何正确处理返回的数据。
- 文件下载场景中，缺少明确的 MIME 类型标识可能导致浏览器不能识别为下载文件。

关键解决方法

为了解决上述问题，采取了以下两点措施：

在请求中指定 responseType: "blob"
这步操作确保了浏览器在接收服务器返回数据时，以二进制流（Blob）的方式处理，而不会错误地进行文本解析：

export const exportRecord = (data: ExportRecordReq) => {
  return request<ExportRecordReq, any>({
    url: "/consumeRecord/exportRecord",
    method: "GET",
    params: data,
    responseType: "blob",  // 指示接收二进制数据，避免文本解析
    headers: {
      "Content-Type": "application/x-download"
    }
  })
}

效果： 浏览器按二进制数据接收，确保数据完整性。

设置合适的 Content-Type
针对 Excel 文件，可以使用更精确的 MIME 类型：

对于新版 Excel (.xlsx)：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
对于旧版 Excel (.xls)：application/vnd.ms-excel

尽管在请求时可暂时使用 application/x-download，但在实际下载时将 Blob 对象创建为正确的 MIME 类型：

/**
 * 导出excel数据
 */
export function exportExcelData(filename: string, data: Blob) {
  // 使用正确的 MIME 类型创建 Blob 对象，确保浏览器识别为Excel文件
  const blob = new Blob([data], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  })
  const downloadUrl = URL.createObjectURL(blob)
  const link = document.createElement("a")
  link.href = downloadUrl
  link.download = `${filename}.xlsx`
  link.click()
}

效果： 浏览器下载的文件拥有正确的 MIME 类型，用户打开后能正常显示。

作用流程

    服务器返回二进制数据
    ↓
    responseType: "blob" (保持二进制数据的完整性)
    ↓
    Content-Type (告诉浏览器如何处理这些数据)
    ↓
    浏览器正确处理文件

没有这两句：数据可能在传输或解析过程中被破坏
有这两句：数据完整性得到保证，且浏览器知道如何正确处理

总结

数据接收： 通过指定 responseType: "blob"，确保浏览器按二进制方式接收文件数据，避免数据因文本解析而被错误转换。
头信息设置： 使用正确的 Content-Type（或在前端重新定义成正确的 MIME 类型）帮助浏览器识别和处理文件。
前端下载流程： 利用 new Blob 与 URL.createObjectURL() 动态生成下载链接，模拟点击下载，从而确保文件下载后能正确打开。

通过以上措施，可以有效防止由于浏览器默认解析方式不当而导致的文件损坏问题，确保导出的 Excel 文件在下载后打开正常。