前端Fetch请求下载文件损坏：除TXT外其他文件均无法打开

你的代码里有两个核心问题导致图片、压缩包这类非TXT文件下载后损坏：

• 重复包装Blob：你把res.blob()返回的Blob对象再次嵌套到新Blob中，这会错误处理二进制数据的结构。
• 强制覆盖文件类型：强行指定type: "application/octet-stream"会替换原文件的正确MIME类型，破坏对格式敏感的文件结构。

修正后的代码：

fetch(this.baseUri + endpointURI)
  .then((res) => {
    // 先校验响应状态
    if (!res.ok) throw new Error('请求失败');
    return res.blob();
  })
  .then((blob) => {
    // 直接使用原Blob，无需二次包装
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.setAttribute("download", attachmentName);
    
    // 可选优化：从响应头提取后端返回的文件名（如果后端支持）
    // const filename = res.headers.get('Content-Disposition')?.split('filename=')[1] || attachmentName;
    // a.setAttribute("download", filename);
    
    document.body.appendChild(a);
    a.click();
    // 清理URL对象，避免内存泄漏
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      a.remove();
    }, 100);
});

额外说明：

• res.blob()已经根据响应头的Content-Type完成了正确的二进制数据解析，直接使用即可。
• 务必调用window.URL.revokeObjectURL(url)释放内存，尤其是在频繁下载文件的场景下。

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