Angular无法从Spring Boot服务器下载文件问题排查

我尝试通过Angular从Spring Boot服务器下载文件，按教程实现对应功能后，文件无法正常下载。已确认函数触发正常、请求可执行：点击下载链接时onDownloadFile()函数会被调用，Postman测试能正确返回txt文件，但前端无文件下载动作。

相关代码 #

Angular代码 #

download(): Observable<HttpEvent<Blob>>{
  console.log("downloading");
  return this.http.get(this.url+'/crudops/read/attachment/'+this.attachmentId,{
    observe: 'events',
    responseType: 'blob'
  });
}

onDownloadFile(): void {
  this.download().subscribe(
    event => {
      console.log(event);
    },
    // (error: HttpErrorResponse) => {
    //   console.log(error);
    // }
  );
}

Spring Boot代码 #

@GetMapping(path="/crudops/read/attachment/{id}")
public ResponseEntity<Resource> readAttachment(@PathVariable("id") int id)
{
    System.out.println(id);
    Optional<Attachment> attachmentGot=attachmentRepository.findById(id);
    Attachment attachment=attachmentGot.get();
    var file=attachment.getFile();
    ByteArrayResource resource = new ByteArrayResource(file);
    return ResponseEntity.ok()
            .body(resource);
}

问题原因 #

1. 前端未处理Blob生成下载动作：当前Angular代码仅订阅了请求事件，但没有将返回的Blob转换为可下载链接，无法触发浏览器的下载行为。
2. 后端响应缺少必要头信息：Spring Boot返回的响应未指定Content-Disposition和Content-Type头，浏览器无法识别这是需要下载的附件。

解决方案 #

1. 完善Spring Boot后端响应头 #

在返回ResponseEntity时添加文件类型和下载标识头，明确告诉浏览器这是一个需要下载的文件：

import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;

@GetMapping(path="/crudops/read/attachment/{id}")
public ResponseEntity<Resource> readAttachment(@PathVariable("id") int id)
{
    System.out.println(id);
    Optional<Attachment> attachmentGot=attachmentRepository.findById(id);
    Attachment attachment=attachmentGot.get();
    var file=attachment.getFile();
    ByteArrayResource resource = new ByteArrayResource(file);
    
    return ResponseEntity.ok()
            .contentType(MediaType.TEXT_PLAIN) // 根据实际文件类型调整，如application/pdf、image/png等
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\""+attachment.getFileName()+"\"") // 替换为实体中存储的文件名
            .body(resource);
}

2. 修改Angular前端处理Blob响应 #

订阅请求事件后，当收到完整响应时，创建临时下载链接并触发浏览器下载：

import { HttpEventType } from '@angular/common/http';

onDownloadFile(): void {
  this.download().subscribe(
    event => {
      if (event.type === HttpEventType.Response) {
        // 构建Blob对象
        const blob = new Blob([event.body], { type: event.headers.get('Content-Type') });
        // 创建临时URL
        const url = window.URL.createObjectURL(blob);
        // 创建a标签触发下载
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        
        // 从响应头解析文件名
        const contentDisposition = event.headers.get('Content-Disposition');
        let filename = 'default.txt';
        if (contentDisposition) {
          const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
          if (filenameMatch?.length > 1) {
            filename = filenameMatch[1];
          }
        }
        downloadLink.download = filename;
        
        document.body.appendChild(downloadLink);
        downloadLink.click();
        
        // 清理临时资源
        window.URL.revokeObjectURL(url);
        document.body.removeChild(downloadLink);
      }
    },
    error => {
      console.error('下载失败:', error);
    }
  );
}

补充说明 #

• 如果是PDF、图片等其他类型文件，需同步调整MediaType和Blob的type参数，确保与文件实际格式匹配。
• 若后端未存储文件名，可在Content-Disposition头中指定固定文件名，或通过请求参数传递。

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