Angular客户端导出服务器生成CSV文件：response.body未定义致空文件

问题场景 #

Angular调用后端接口下载CSV文件时，response.body始终为undefined，导致导出空文件，但服务器实际返回了有效CSV数据。

Angular端原代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpResponse } from '@angular/common/http';
import { saveAs } from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class FileDownloadService {

  constructor(private http: HttpClient) { }

  download_adhoc_report(endpoint, params, url, report_name = 'data.csv') {
    const httpOptions = {
      responseType: 'arraybuffer' as 'json',
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      params: new HttpParams()
    };
    if (params) {
      httpOptions.params = new HttpParams();
      for (let k in params) {
        httpOptions.params = httpOptions.params.set(k, params[k]);
      }
    }

    this.http.get(url + endpoint, httpOptions).subscribe((response: HttpResponse<ArrayBuffer>) => {
      const blob = new Blob([response.body], { type: 'text/csv' }); // response.body为undefined
      saveAs(blob, report_name);
    }, error => {
      console.error('File download failed:', error);
    });
  }
}

服务器端代码（Azure Functions） #

import azure.functions as func
from ..shared import blobOps

def main(req: func.HttpRequest) -> func.HttpResponse:
    
    report_path = req.params.get('output_filePath') + req.params.get('output_fileName')

    try:
        with open(req.params["LOCALFILENAME"], "r") as my_blob2:
           file = my_blob2.read()
       
        headers = {
                "Content-Disposition": "attachment; filename=data.csv",
                "Content-Type": "text/csv"
            }
        
        return func.HttpResponse(file, headers=headers, status_code=200)
    
    except Exception as e:
        print(e)
        return func.HttpResponse("Error : File not found", status_code=404)

核心问题分析 #

默认情况下，Angular的HttpClient.get()仅返回响应体数据，而非完整的HttpResponse对象。原代码中强制将响应标注为HttpResponse<ArrayBuffer>，但实际拿到的是ArrayBuffer本身，自然不存在body属性，导致response.body为undefined。

修复步骤 #

1. 配置获取完整响应对象 #

在请求配置httpOptions中添加observe: 'response'，让HttpClient返回包含headers、status等信息的完整HttpResponse，此时才能通过response.body访问响应体。

2. 修正响应类型配置 #

将responseType: 'arraybuffer' as 'json'改为responseType: 'arraybuffer'，无需将arraybuffer类型断言为json，避免类型混淆。

3. 简化参数构建逻辑 #

使用HttpParams.fromObject(params)替代手动循环设置参数，代码更简洁。

修改后的Angular代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpResponse } from '@angular/common/http';
import { saveAs } from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class FileDownloadService {

  constructor(private http: HttpClient) { }

  download_adhoc_report(endpoint: string, params: any, url: string, report_name = 'data.csv') {
    const httpOptions = {
      responseType: 'arraybuffer', // 直接指定响应类型
      observe: 'response', // 获取完整的HttpResponse对象
      headers: new HttpHeaders({
        'Content-Type': 'application/json'
      }),
      params: params ? HttpParams.fromObject(params) : new HttpParams() // 简化参数构建
    };

    this.http.get(url + endpoint, httpOptions).subscribe((response: HttpResponse<ArrayBuffer>) => {
      if (response.body) { // 先校验响应体是否存在
        const blob = new Blob([response.body], { type: 'text/csv' });
        saveAs(blob, report_name);
      } else {
        console.error('响应体为空');
      }
    }, error => {
      console.error('文件下载失败:', error);
    });
  }
}

额外验证建议 #

• 检查服务器返回的Content-Length响应头，确认数据长度与实际CSV文件一致。
• 若CSV包含中文，确保服务器返回的内容编码为UTF-8，Angular端直接使用ArrayBuffer构建Blob即可正常显示中文。

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