Angular 2+通过Express API下载图片失败求助

你遇到的核心问题是Angular的HttpClient默认会把响应解析为JSON格式，导致图片的二进制数据被转换成了乱码字符串（也就是你看到的特殊字符），最终无法正确生成Blob完成下载。咱们一步步来修复：

第一步：修改Angular的HTTP请求，指定响应类型 #

默认的http.get()会把响应当作JSON处理，这对二进制文件来说完全不对。你需要明确告诉HttpClient要接收二进制Blob数据：

修改你的downloadData方法：

downloadData(id) {
  let apiUrl = 'http://localhost:3000/api/download-data/';
  return this.http.get(`${apiUrl}${id}`, { responseType: 'blob' }) // 关键：添加响应类型配置
    .catch((error: Response) => Observable.throw(error.json()));
}

这里的{ responseType: 'blob' }是核心，它会让HttpClient直接返回Blob对象，而不是尝试解析成JSON字符串。

第二步：优化前端的下载函数 #

现在你拿到的result已经是Blob对象了，不需要再把它放进数组里重新创建Blob，同时用a标签触发下载比window.open()更可靠：

downloadFile(blob: Blob) {
  const url = window.URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = 'me.jpg'; // 指定下载后的文件名
  document.body.appendChild(downloadLink);
  downloadLink.click();
  // 清理资源，避免内存泄漏
  window.URL.revokeObjectURL(url);
  document.body.removeChild(downloadLink);
}

第三步：验证后端Express代码的正确性 #

你的Express代码里res.download(task.workshopData,'me.jpg')需要确保task.workshopData是服务器上的真实文件路径（比如./uploads/xxx.jpg）。如果workshopData是存储在数据库中的二进制Buffer或者Base64字符串，那你需要调整后端代码：

比如存储的是Buffer时，应该这样返回：

router.get('/download-data/:id', function (req, res, next) {
  Workshop.findById(req.params.id).then((task) => {
    res.setHeader('Content-Disposition', 'attachment; filename="me.jpg"');
    res.setHeader('Content-Type', 'image/jpeg');
    res.send(task.workshopData); // 直接发送二进制Buffer
  }).catch(next);
});

最后测试流程 #

1. 重启Express服务器和Angular应用
2. 触发下载请求，现在应该能正确拿到Blob并弹出下载对话框了

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