如何通过Angular接收并下载C# Web API返回的PDF文件

核心问题 #

Angular HttpClient默认将响应解析为JSON格式，但后端返回的是二进制PDF流，直接请求会因格式不匹配报错。

修复方案 #

1. 修改Angular服务的请求配置 #

更新请求时显式指定响应类型为blob，告诉HttpClient处理二进制数据：

async getPdfList(params: any) {
  return await this.ws.get(`${this.billingApiUrl}/invoice/generatepdf`, {
    params: params,
    responseType: 'blob' as 'json' // 类型断言避免TypeScript类型报错
  }).toPromise();
}

2. 添加前端下载逻辑 #

获取到Blob对象后，通过创建临时链接触发浏览器下载：

async downloadInvoice(params: any) {
  const pdfBlob = await this.getPdfList(params);
  // 创建下载链接
  const downloadUrl = window.URL.createObjectURL(pdfBlob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'Invoice.pdf'; // 与后端指定的文件名保持一致
  // 触发下载
  document.body.appendChild(link);
  link.click();
  // 清理资源
  window.URL.revokeObjectURL(downloadUrl);
  document.body.removeChild(link);
}

3. 后端可选优化（确保响应头正确） #

虽然当前后端返回正常，可手动确认Content-Disposition头是否正确输出，避免部分浏览器识别异常：

Response.Headers.Add("Content-Disposition", $"attachment; filename={Filename}");
return File(response, "application/pdf", Filename);

排查要点 #

• 验证请求参数与Swagger测试时完全一致，避免参数缺失导致生成空PDF
• 若存在跨域，确保后端配置Access-Control-Expose-Headers包含Content-Disposition，让前端能读取响应头
• 确认后端生成的PDF内容有效，可通过Swagger下载后打开验证

内容的提问来源于stack exchange，提问作者saurav.rox