Angular中从字节数组下载Zip文件失败问题求助

你的问题核心是**$http默认会将响应解析为文本/JSON格式**，而API返回的是Zip二进制字节数组，这种自动解析会破坏原始二进制数据的结构，导致生成的Blob无效，最终下载的Zip显示为空归档。

解决方案 #

需要在$http请求中指定响应类型为arraybuffer，让AngularJS直接保留原始二进制数据，再基于该数据创建Blob并完成下载。

步骤1：修改API调用代码，添加响应类型配置

function downloadAzureRT(params) {
  return $http({
    method: 'GET',
    url: API.public('protectionSources/downloadArtFile'),
    params: params || {},
    responseType: 'arraybuffer' // 关键配置：告诉$http返回二进制数组，不做解析
  }).then(function downloadAwsARTResp(resp){
    return resp.data; // 直接返回原始ArrayBuffer，无需转成对象
  });
}

步骤2：完善前端下载逻辑

downloadART() {
  this.ajsPubSourceService.downloadAzureRT({
    filePath: ART_FILE_PATH,
    fileName: ART_FILE_NAME,
  })
  .then((response) => {
    // 用原始ArrayBuffer创建Blob
    const blob = new Blob([response], { type: 'application/zip' });
    const url = window.URL.createObjectURL(blob);
    
    // 使用a标签触发下载（比window.open更稳定，支持指定文件名）
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = ART_FILE_NAME; // 设置下载后的文件名
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理临时资源，避免内存泄漏
    window.URL.revokeObjectURL(url);
    document.body.removeChild(downloadLink);
  });
}

关键说明 #

• responseType: 'arraybuffer'是核心：它会阻止$http将二进制数据解析为文本，确保你拿到的是和API返回完全一致的原始字节数组。
• 用a标签下载比window.open更可靠：部分浏览器会拦截window.open的弹出，且a标签支持直接指定下载文件名，提升用户体验。
• 记得清理临时URL：调用revokeObjectURL释放内存，避免内存泄漏。

额外注意 #

确认后端API返回的Content-Type头为application/zip或application/octet-stream，这能帮助浏览器正确识别文件类型，但即使后端没设置，只要前端指定了Blob的type，也能正常下载。

内容的提问来源于stack exchange，提问作者Sai Sandhya K V