JavaScript下载Blob文件时无法正确解析对应格式的问题

核心问题是请求没有以二进制格式接收数据，浏览器默认会把响应内容解析为UTF-8字符串，这个过程会破坏原始文件的二进制结构，导致生成的下载文件损坏。

解决步骤 #

1. 发起请求时指定响应类型 #

在发送GET请求时，必须明确设置responseType为'blob'或'arraybuffer'，让浏览器直接保留原始二进制数据，而不是转成字符串。

示例（Axios）：

axios.get('/your-download-url', { responseType: 'blob' })
  .then(response => {
    blob = response.data; // 这里直接拿到Blob对象
  })
  .catch(err => console.error('请求失败:', err));

示例（Fetch API）：

fetch('/your-download-url')
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.blob(); // 直接转换为Blob
  })
  .then(blobData => {
    blob = blobData;
  });

示例（XMLHttpRequest）：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/your-download-url');
xhr.responseType = 'blob'; // 关键设置
xhr.onload = () => {
  if (xhr.status === 200) {
    blob = xhr.response;
  }
};
xhr.send();

2. 修正下载逻辑 #

如果已经正确拿到Blob对象，不需要再用new Blob([data])包装，直接使用即可，同时记得释放URL对象避免内存泄漏：

if (blob) {
  const a = document.createElement('a');
  const url = URL.createObjectURL(blob);
  a.href = url;
  a.download = 'my-file-name.xlsx';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url); // 释放URL资源
  console.log('download complete');
}

为什么之前的代码会失败 #

当你没有设置responseType时，浏览器会把二进制响应解析为UTF-8字符串。这个过程中，一些无法用UTF-8表示的字节会被替换成占位符（比如�），导致原始文件的二进制结构被破坏。虽然开发者工具能看到部分文本内容（比如PNG的标识、Excel的XML结构），但文件的完整性已经丢失，自然无法正常打开。而Postman/Insomnia会自动识别二进制响应并保留原始数据，所以能正常保存文件。

内容的提问来源于stack exchange，提问作者cSharp