Angular调用Spring Boot PDF下载接口时浏览器无法触发下载

问题核心原因 #

浏览器仅对直接导航请求（如地址栏输入、a标签跳转）自动处理Content-Disposition: attachment响应头，而Angular发起的AJAX请求不会触发自动下载，需前端手动处理二进制响应内容。

后端代码优化（可选但推荐） #

1. 将Content-Type改为application/pdf，符合PDF文件的媒体类型规范；
2. 用双引号包裹文件名，避免文件名含空格时出现解析问题。

修改后的后端控制器片段：

@PostMapping("/downloadPdf/{apiGroup}/{api}")
public ResponseEntity<InputStreamResource> generatePdf(@PathVariable String apiGroup, @PathVariable String api, HttpServletRequest req){
    
    // 省略原有日志和业务逻辑代码...
    
    try {
        ByteArrayInputStream pdfStream = documentGenerationService.generatePdf(req, apiGroup, api, loggerDto, logger);
        if(pdfStream != null){
            HttpHeaders httpHeaders = new HttpHeaders();
            // 双引号包裹文件名，兼容含空格的场景
            httpHeaders.add("Content-Disposition", "attachment; filename=\""+api+".pdf\"");
    
            return ResponseEntity
                    .ok()
                    .headers(httpHeaders)
                    .contentType(MediaType.APPLICATION_PDF) // 使用PDF专用媒体类型
                    .body(new InputStreamResource(pdfStream));
        }
        // 补充空流的处理逻辑...
    } catch (Exception e) {
        // 异常处理逻辑...
    }
}

Angular前端处理代码 #

需设置responseType: 'blob'获取二进制响应，再通过创建临时链接触发下载：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class PdfDownloadService {
  constructor(private http: HttpClient) {}

  downloadPdf(apiGroup: string, api: string): void {
    this.http.post(
      `/downloadPdf/${apiGroup}/${api}`,
      null, // 根据实际需求传递请求体参数
      { responseType: 'blob', observe: 'response' }
    ).subscribe({
      next: (response) => {
        // 从响应头提取文件名
        const contentDisposition = response.headers.get('Content-Disposition');
        let filename = 'document.pdf';
        if (contentDisposition) {
          const filenameMatch = contentDisposition.match(/filename="?([^"]+)"?/);
          if (filenameMatch?.length > 1) {
            filename = filenameMatch[1];
          }
        }

        // 创建Blob并触发下载
        const blob = new Blob([response.body as Blob], { type: 'application/pdf' });
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = filename;
        link.click();

        // 清理临时资源
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(link);
      },
      error: (err) => {
        console.error('PDF下载失败:', err);
      }
    });
  }
}

关键注意点 #

• 必须指定responseType: 'blob'，否则Angular会将二进制PDF内容解析为字符串，导致文件损坏；
• 通过observe: 'response'获取完整响应对象，才能读取Content-Disposition头提取文件名；
• 下载完成后调用URL.revokeObjectURL清理临时URL，避免内存泄漏。

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