如何在前后端实现文件下载？InputStreamResource触发文件下载方法

当前无法触发下载的核心原因是前端通过XHR（即Angular HttpClient封装的AJAX请求）拉取文件流，这种请求模式下，即使后端正确返回了Content-Disposition: attachment响应头，浏览器也不会自动唤起下载行为，只会将响应内容交由JS回调逻辑处理，也就是你现在看到的控制台打印数据的现象。

你可以根据自己的鉴权场景二选一： #

方案1：零流处理，原生触发下载（推荐无特殊请求头场景使用） #

如果你的接口不需要携带自定义请求头（比如鉴权token通过cookie自动携带，无需在header中手动传入），直接放弃AJAX请求，通过浏览器原生访问接口地址的方式触发下载即可，浏览器识别到附件响应头会自动将文件加入下载列表。

• 前端CSV触发方法直接修改为：

csv() {
  // 同域下直接访问接口地址，_self表示在当前标签页触发，不会新开页面
  window.location.href = '/csv';
}

• 后端代码小优化（必改，避免文件名异常）：
  当前Content-Disposition头的文件名未加引号，当文件名包含空格、中文时会出现解析截断问题，修改后代码如下：

@RequestMapping(path = "/csv", method = RequestMethod.GET)
public ResponseEntity<InputStreamResource> getCSV() {
    String filename = "User.csv";
    InputStreamResource file = new InputStreamResource(fileService.load());
    return ResponseEntity.ok()
            // 文件名用双引号包裹，兼容特殊字符
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + filename + "\"")
            .contentType(MediaType.parseMediaType("application/csv"))
            .body(file);
}

该方案代码量极小，不需要处理二进制流转换，缺点是不支持需要手动传自定义请求头的场景。 #

方案2：兼容自定义请求头场景（前端手动构造下载） #

如果接口必须携带自定义请求头（比如鉴权token需要放在Authorization header中传递，无法通过cookie自动携带），就保持AJAX请求逻辑，前端拿到二进制流后手动触发下载，步骤如下：

1. 修改服务层请求配置，指定响应类型为二进制blob，避免HttpClient默认按文本解析导致文件乱码：

// userService中的getCSV方法
getCSV() {
  return this.http.get('/csv', {
    responseType: 'blob', // 核心配置：告知HttpClient按二进制流接收响应
    observe: 'response' // 可选配置：需要读取后端返回的响应头（比如后端传的文件名）时开启
  })
}

2. 修改组件中的csv回调方法，拿到流后通过临时a标签触发下载：

csv() {
  this.userService.getCSV().subscribe({
    next: (res) => {
      // 开启observe: 'response'时res为完整响应对象，blob存在res.body中；未开启时res直接为blob对象
      const blob = res.body ?? res;
      // 生成临时blob访问地址
      const tempUrl = window.URL.createObjectURL(blob);
      // 创建临时a标签
      const downloadLink = document.createElement('a');
      downloadLink.href = tempUrl;
      // 配置下载文件名，也可以从res.headers.get('Content-Disposition')中解析后端返回的文件名
      downloadLink.download = 'User.csv';
      // 挂载标签触发点击
      document.body.appendChild(downloadLink);
      downloadLink.click();
      // 清理临时DOM和内存占用
      document.body.removeChild(downloadLink);
      window.URL.revokeObjectURL(tempUrl);
    }
  })
}

该方案和普通接口请求的拦截、鉴权逻辑完全兼容，适配所有请求场景。

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