Angular调用API下载PDF时文件名显示undefined问题求助

问题根源 #

1. 响应头属性拼写错误：代码里误用了res.header，Angular HttpResponse对象的响应头属性是复数形式的res.headers。
2. 未处理格式细节：content-disposition字段中filename前可能带空格，直接拆分字符串容易出错；部分API返回的文件名会用引号包裹，也需要额外处理。
3. CORS配置缺失：如果是跨域请求，服务器未在Access-Control-Expose-Headers中声明content-disposition，前端无法读取该响应头。

修正后的代码 #

1. 组件端修正文件名提取逻辑 #

onGeneratepdf() {
  this.service.getPDF(123).subscribe((res: any) => {
    const contentDisposition = res.headers.get('content-disposition');
    // 设置默认文件名，避免获取失败时显示undefined
    let filename = 'download.pdf';

    if (contentDisposition) {
      // 用正则匹配文件名，兼容带空格、带引号的情况
      const filenameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (filenameMatch && filenameMatch[1]) {
        // 去除文件名前后的引号
        filename = filenameMatch[1].replace(/['"]/g, '');
      }
    }

    const blob: Blob = res.body as Blob;
    const a = document.createElement('a');
    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.click();
    // 释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(a.href);
  });
}

2. 服务器端CORS配置补充 #

如果是跨域请求，需要在API响应头中添加以下配置，允许前端读取content-disposition：

Access-Control-Expose-Headers: content-disposition

关键说明 #

• 正则匹配比字符串拆分更健壮，能适配不同格式的content-disposition返回值。
• 添加默认文件名，确保极端场景下也能正常显示下载文件名。
• 调用window.URL.revokeObjectURL释放临时URL，避免浏览器内存泄漏。

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