如何在Angular中使用FileSaver.js指定下载文件的自定义名称？

嘿，这问题我熟！FileSaver的saveAs方法其实自带自定义文件名的参数，只是你没用到而已，我给你两种解决方案，按需选就行：

1. 直接硬编码自定义文件名（最简单的情况） #

如果文件名是固定的，直接给saveAs传第二个参数就行，记得带上文件扩展名哦（比如.pdf、.xlsx，根据你的文件类型来）：

this._UsersService.downloadReport(id).subscribe(data => {
  // 把"自定义报表名称.pdf"改成你想要的名字+扩展名
  FileSaver.saveAs(data, "自定义报表名称.pdf");
});

2. 从后端响应头提取文件名（更灵活的场景） #

很多时候后端会在响应头的Content-Disposition里返回文件名（比如attachment; filename="report_2024.pdf"），这时候可以动态获取，不用硬编码：

首先，你需要修改downloadReport方法，让它返回完整的HTTP响应（而不是只返回body），在Angular的HttpClient请求里加上{ observe: 'response' }选项：

// 在你的UsersService里修改downloadReport方法
downloadReport(id: number): Observable<HttpResponse<Blob>> {
  return this.http.get(`/api/reports/${id}`, {
    observe: 'response',
    responseType: 'blob' // 确保返回Blob类型，FileSaver需要这个
  });
}

然后在组件里订阅时，从响应头提取文件名：

this._UsersService.downloadReport(id).subscribe(response => {
  const contentDisposition = response.headers.get('Content-Disposition');
  let fileName = "默认文件名.pdf"; // 兜底的默认名
  
  if (contentDisposition) {
    // 正则匹配出文件名部分
    const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (matches != null && matches[1]) {
      fileName = decodeURIComponent(matches[1].replace(/['"]/g, ''));
    }
  }
  
  // 用提取到的文件名保存
  FileSaver.saveAs(response.body, fileName);
});

小提示： #

• 确保后端允许前端访问Content-Disposition响应头，需要在后端设置Access-Control-Expose-Headers: Content-Disposition，否则前端拿不到这个头哦！
• 一定要把响应类型设为blob，不然FileSaver可能无法正确处理文件。

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