如何在Angular 12中从ASP.NET Web API下载Excel文件？

1. 调整核心HTTP服务，支持文件流响应 #

原核心服务的post方法默认处理JSON响应，需新增专门用于文件下载的post方法，指定responseType: 'blob'以接收文件流：

// 核心服务文件中新增方法
public postFile(path: string, body: object = {}): Observable<Blob> {
  // 复制原有配置并修改响应类型，避免影响其他请求
  const fileOptions = { ...this.options, responseType: 'blob' as 'json' };
  return this.httpClient
             .post(this.baseUrl + path, JSON.stringify(body), fileOptions)
             .pipe(catchError(this.handleError));
}

提示：若原有this.options包含Accept: application/json这类强制JSON响应的请求头，需在fileOptions中覆盖该配置。

2. 更新api.service的downloadData方法 #

修改downloadData方法，调用新增的postFile接口：

// api.service文件
public downloadData(req: DownloadData): Observable<Blob> {
  return this.apiService.postFile('api/Report/GetExcelFile', req);
}

3. 修改组件订阅逻辑，实现文件下载 #

在组件的下载调用中，将返回的Blob转换为可下载文件：

this.apiService.downloadData(downloadData).subscribe(res => {
  // 创建Blob对象，指定Excel文件类型
  const blob = new Blob([res], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  });
  // 定义文件名（可固定或从响应头提取）
  const fileName = 'authors.xlsx';
  // 创建临时下载链接并触发下载
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  // 清理临时资源
  window.URL.revokeObjectURL(url);
  document.body.removeChild(a);
}, error => {
  console.error('下载失败:', error);
});

可选：从响应头自动提取文件名（推荐） #

如果后端返回的响应头包含Content-Disposition，可从中解析出文件名，替换固定文件名：

this.apiService.downloadData(downloadData).subscribe((res: Blob) => {
  // 需后端在CORS配置中允许暴露Content-Disposition头
  const contentDisposition = this.httpClient.getResponseHeader('Content-Disposition');
  let fileName = 'authors.xlsx';
  if (contentDisposition) {
    const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (matches?.[1]) {
      fileName = decodeURIComponent(matches[1].replace(/['"]/g, ''));
    }
  }
  // 后续下载逻辑同上
});

后端配置提示：ASP.NET Core需在CORS配置中添加.WithExposedHeaders("Content-Disposition")，否则前端无法获取该响应头。

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