ExtJS中Ajax/fetch获取Zip文件损坏，Postman正常问题求助

核心原因 #

通过Ajax或Fetch获取二进制文件（如Zip）时，若未正确指定响应的数据类型，浏览器会默认将响应解析为UTF-8文本，导致二进制数据被篡改，最终文件损坏。Postman会自动处理二进制响应，所以不会出现这个问题。

具体修复方案 #

1. Fetch API 正确写法 #

必须将响应转为Blob对象，避免文本解析破坏二进制数据：

fetch('你的Zip文件接口地址')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.blob(); // 关键：将响应转为Blob类型
  })
  .then(blob => {
    // 生成下载链接并触发下载
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'target.zip';
    a.click();
    URL.revokeObjectURL(url); // 释放内存
  })
  .catch(err => console.error('下载出错:', err));

2. XMLHttpRequest（Ajax）正确写法 #

需显式设置responseType为blob或arraybuffer：

const xhr = new XMLHttpRequest();
xhr.open('GET', '你的Zip文件接口地址');
xhr.responseType = 'blob'; // 关键：指定响应为二进制Blob
xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'target.zip';
    a.click();
    URL.revokeObjectURL(url);
  }
};
xhr.send();

3. 额外注意事项 #

• 确认后端返回的Content-Type头为application/zip或application/octet-stream，避免浏览器错误解析响应类型。
• 若使用axios等封装库，需配置responseType: 'blob'：

  axios.get('你的Zip文件接口地址', { responseType: 'blob' })
    .then(res => {
      const blob = new Blob([res.data], { type: 'application/zip' });
      // 后续下载逻辑同上
    });
  

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