Angular 4通过POST请求下载Excel文件时出现Blob类型不存在错误

我在Angular 4项目里多次碰到这个问题，本质是HttpClient默认会把响应自动解析成JSON对象，但你的后端返回的是二进制Excel文件，所以拿到的响应不是Blob类型，自然会报这个错误。下面是具体的修复步骤：

1. 修改HTTP请求，指定响应类型为Blob #

在你的exportExcelXSL方法里，调用HttpClient时必须明确设置responseType: 'blob'，注意Angular 4里需要用类型断言as 'json'来绕过类型检查（这是Angular 4版本的小坑）：

exportExcelXSL() {
  console.log("Excel导出请求");
  console.log(this.workRequestSearchBasicReq);
  
  // 清理请求参数里的undefined/null字段
  this.workRequestSearchBasicReq.OrdersPerPage = undefined;
  const request = Utility.removeUndefinedNullFields(this.workRequestSearchBasicReq);
  console.log("处理后的请求参数:", request);

  const data = { ICWRQry: Utility.removeUndefinedNullFields(request) };

  // 关键：设置responseType为blob
  this.http.post('你的后端接口URL', data, { responseType: 'blob' as 'json' })
    .subscribe((response: Blob) => {
      this.downloadExcelFile(response);
    }, error => {
      console.error("导出失败:", error);
    });
}

2. 实现下载文件的方法 #

拿到Blob响应后，需要创建下载链接触发浏览器下载：

private downloadExcelFile(blob: Blob) {
  // 创建Blob URL
  const url = window.URL.createObjectURL(blob);
  // 创建a标签
  const a = document.createElement('a');
  a.href = url;
  // 设置下载文件名，这里可以从后端响应头获取，或者固定命名
  a.download = '工作请求列表.xlsx';
  // 触发点击
  document.body.appendChild(a);
  a.click();
  // 清理资源
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
}

3. 后端Java接口的注意事项 #

确保你的Java REST接口设置了正确的响应头，否则浏览器可能无法识别文件类型：

@PostMapping("/export-excel")
public ResponseEntity<Resource> exportExcel(@RequestBody YourRequestDto request) {
    // 生成Excel文件的业务逻辑...
    Resource file = new FileSystemResource(生成的Excel文件路径);
    
    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_TYPE, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"工作请求列表.xlsx\"")
            .body(file);
}

这样修改后，Angular就能正确拿到Blob类型的响应，不会再出现“Blob doesn't exist on type 'Object'”的错误啦～

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