Angular客户端下载Zip文件损坏问题求助

这个问题我之前也碰到过，核心原因是Angular的$http默认会把响应解析成UTF-8字符串，而Zip是二进制文件，字符串化的过程会破坏原始的二进制数据，最后生成的Blob自然就是损坏的。下面分客户端和服务器端给出修复方案：

客户端（Angular）修复 #

你需要给$http请求添加responseType: 'arraybuffer'配置，告诉Angular不要把响应转成字符串，直接保留二进制的ArrayBuffer格式：

$http.post('/zip', { id: _id }, { responseType: 'arraybuffer' })
  .success(function (data, status, headers, config) {
    // 用ArrayBuffer创建Blob，确保二进制数据完整
    var blob = new Blob([data], { type: "application/zip" });
    var contentDisp = headers('content-disposition');
    if (contentDisp && /^attachment/i.test(contentDisp)) {
      var fileName = contentDisp.toLowerCase()
        .split('filename=')[1]
        .split(';')[0]
        .replace(/"/g, '');
      FileSaver.saveAs(blob, fileName);
    }
  })
  .error(function () {
    console.log("Could not download");
  });

关键改动就是在$http的第三个参数里加入{ responseType: 'arraybuffer' }，这样data就是原始的二进制数据，生成的Blob才是完整的Zip文件。

服务器端（Node.js）优化（可选但推荐） #

你的服务器代码现在是先把Zip文件写到本地，再用res.download发送，其实可以直接把s3Zip的流pipe到响应对象，这样既节省磁盘空间，又避免本地文件读写可能带来的问题：

app.route('/zip')
  .post(function(req, res) {
    // 设置响应头，告诉客户端这是附件类型的Zip文件
    res.setHeader('Content-Disposition', `attachment; filename="${outzipfile}"`);
    res.setHeader('Content-Type', 'application/zip');

    s3Zip
      .archive({ s3: s3Client, bucket: bucket}, folder, s3_files)
      .pipe(res)
      .on('error', function(err) {
        console.log(err);
        return res.status(500).json({error: "Internal Server Error"});
      });
  });

这样一来，s3Zip生成的Zip流会直接发送给客户端，不需要先写入本地文件，流程更高效，也减少了出错的环节。

额外检查点 #

• 确认服务器端发送的Content-Type头是application/zip，客户端Blob的type也要对应
• 如果还是有问题，可以在客户端打印data的字节长度，和服务器端生成的Zip文件大小对比，确保数据没有截断

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