如何获取使用Angular5下载文件的文件名？

我来帮你搞定这个问题～首先得提一个关键前提：后端必须配置允许前端访问Content-Disposition响应头，不然浏览器会默认隐藏这个非标准头，前端根本拿不到。你需要让后端在响应里加上：

Access-Control-Expose-Headers: Content-Disposition

接下来是前端Angular 5的代码实现，我帮你完善你原来的download方法：

import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 假设这是你的服务类里的方法
public download(id: string): Observable<{ blob: Blob, filename: string }> {
  // 如果需要请求头，在这里添加，比如授权头
  // const headers = new HttpHeaders().set('Authorization', 'Bearer your-token');

  return this.http.get(`/api/files/${id}`, {
    // 关键配置1：获取完整的响应对象，包含headers
    observe: 'response',
    // 关键配置2：指定响应类型为Blob，因为是下载文件
    responseType: 'blob'
  }).pipe(
    map((response: HttpResponse<Blob>) => {
      // 从响应头中获取Content-Disposition
      const contentDisposition = response.headers.get('Content-Disposition');
      // 设置默认文件名，防止获取失败
      let filename = 'downloaded-file.docx';

      if (contentDisposition) {
        // 用正则匹配出filename的值，兼容带引号和不带引号的格式
        const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
        if (filenameMatch && filenameMatch[1]) {
          filename = filenameMatch[1];
        }
      }

      // 返回Blob和文件名，方便后续处理下载
      return { blob: response.body!, filename };
    })
  );
}

然后是调用这个方法实现下载的示例：

this.yourFileService.download('target-file-id').subscribe({
  next: (result) => {
    // 创建临时下载链接
    const fileUrl = window.URL.createObjectURL(result.blob);
    const link = document.createElement('a');
    
    link.href = fileUrl;
    // 这里直接用获取到的文件名
    link.download = result.filename;
    // 触发点击下载
    document.body.appendChild(link);
    link.click();
    
    // 清理临时资源
    window.URL.revokeObjectURL(fileUrl);
    document.body.removeChild(link);
  },
  error: (err) => {
    console.error('下载失败:', err);
  }
});

核心要点总结 #

• 必须让后端配置Access-Control-Expose-Headers，否则response.headers.get('Content-Disposition')会返回null
• 使用observe: 'response'才能拿到完整的响应头信息
• 用正则匹配Content-Disposition里的文件名，兼容不同的格式写法

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