Angular中如何通过HttpClient获取响应模型内的Blob数据

你的问题核心是接口返回的是JSON结构，而你直接将整个响应作为Blob处理，导致保存的文件包含了完整的响应内容。正确的做法是先解析JSON响应，提取data中的base64编码内容，再将其转换为Blob生成Excel文件。

步骤1：修改HttpClient请求，先获取JSON响应 #

去掉responseType: 'blob'配置，先接收完整的JSON响应，再提取目标数据：

return this.httpClient
  .post(`${this.apiURL}user/transaction/generate/excel/filtered/order`, body, { headers: this.headers })
  .pipe(
    map((response: any) => {
      // 提取接口返回的data字段
      const excelData = response.data;
      
      // 将base64字符串转换为Uint8Array
      const decodedData = atob(excelData.body);
      const uint8Array = new Uint8Array(decodedData.length);
      for (let i = 0; i < decodedData.length; i++) {
        uint8Array[i] = decodedData.charCodeAt(i);
      }
      
      // 获取正确的Content-Type，也可以直接指定Excel类型
      const contentType = excelData.headers['Content-Type'][0] || 'application/vnd.ms-excel;charset=UTF-8';
      
      // 生成Blob对象
      return new Blob([uint8Array], { type: contentType });
    }),
    catchError(this.errorHandl)
  );

步骤2：使用Blob生成并保存Excel文件 #

当你拿到上述代码返回的Blob后，可以通过原生DOM方法保存文件：

// 假设你已经订阅了上述请求并拿到blob
saveExcelFile(blob: Blob) {
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = '交易数据.xlsx'; // 自定义文件名
  document.body.appendChild(link);
  link.click();
  
  // 清理资源
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
}

错误原因说明 #

你之前设置responseType: 'blob'，Angular会直接把接口返回的JSON文本当成二进制数据封装成Blob，保存后自然是完整的响应JSON内容。而接口实际返回的是包含base64编码Excel数据的JSON结构，必须先解析JSON，再将base64字符串转换为真正的二进制Blob。

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