Angular 14调用WebAPI下载CSV时响应类型设置异常问题

核心问题 #

Angular HttpClient默认会将响应解析为JSON格式，即便后端返回text/plain类型的CSV字符串，也会被错误解析成JSON对象，导致下载的CSV出现[object Object]、多余引号或括号等异常格式。必须显式配置响应类型为纯文本，才能正确获取原始CSV内容。

步骤1：修正Angular数据服务代码 #

修改downloadCSV方法，添加responseType: 'text'配置（通过类型断言避免TypeScript类型报错）：

downloadCSV(inputParams): Observable<string> {
  const httpOptions = {
    responseType: 'text' as 'json' // 类型断言确保TS编译通过
  };
  return this.http.post<string>('https://localhost/getdata', inputParams, httpOptions);
}

注意：无需设置Content-Type请求头，该头用于告知后端前端发送的请求格式，而非解析后端响应的格式。

步骤2：修正前端下载代码 #

确保使用原始文本生成Blob，同时修正charset的拼写错误（原代码写为chartset）：

// 若使用file-saver库
import { saveAs } from 'file-saver';

this.dataservice.downloadCSV(yourInputParams).subscribe((response) => {
  const csvBlob = new Blob([response], {
    type: 'text/csv; charset=utf-8'
  });
  saveAs(csvBlob, 'filename.csv');
});

如果不依赖file-saver，可以用原生API实现下载：

this.dataservice.downloadCSV(yourInputParams).subscribe((response) => {
  const csvBlob = new Blob([response], { type: 'text/csv; charset=utf-8' });
  const downloadUrl = window.URL.createObjectURL(csvBlob);
  const link = document.createElement('a');
  
  link.href = downloadUrl;
  link.download = 'filename.csv';
  document.body.appendChild(link);
  link.click();
  
  // 清理资源
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
});

可选：优化.NET WebAPI返回（确保响应类型正确） #

虽然Postman测试正常，但可以显式返回ContentResult明确指定响应类型，避免潜在的默认格式问题：

[HttpPost("getdata")]
public IActionResult GetData([FromBody] YourInputModel inputParams)
{
  // 你的CSV生成逻辑
  string csvContent = GenerateCsvData(inputParams);
  
  // 明确返回text/csv类型
  return Content(csvContent, "text/csv; charset=utf-8");
}

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