React.js调用Spring Boot接口无法下载Jaspersoft生成的PDF

这种情况我之前也碰到过，核心问题在于React的HTTP请求库（比如axios/fetch）默认不会自动处理二进制文件的下载响应，而浏览器直接访问时会自动识别Content-Disposition头并触发下载。下面分步骤给你解决方法：

1. 先确认Spring Boot接口的响应头配置 #

首先要确保你的Spring Boot接口已经正确设置了响应头，保证返回的是PDF类型且包含下载提示：

@GetMapping("/export-pdf")
public ResponseEntity<byte[]> exportPdf() {
    // 生成PDF字节数组的业务逻辑
    byte[] pdfBytes = jasperReportService.generatePdfContent();
    
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_PDF);
    // 配置下载文件名，会作为浏览器下载时的默认文件名
    headers.setContentDispositionFormData("attachment", "report.pdf");
    headers.setContentLength(pdfBytes.length);
    
    return new ResponseEntity<>(pdfBytes, headers, HttpStatus.OK);
}

如果接口已经按上述配置，那问题就出在React的请求处理环节。

2. React端的请求处理（分两种常用库） #

方法一：使用Axios #

如果你的项目用Axios，必须配置responseType: 'blob'，然后手动创建下载链接触发下载：

import axios from 'axios';

const downloadReportPdf = async () => {
  try {
    const response = await axios.get('/api/export-pdf', {
      responseType: 'blob', // 关键：指定响应为二进制流类型
      headers: {
        // 如果接口需要认证，这里带上你的token
        'Authorization': `Bearer ${localStorage.getItem('authToken')}`
      }
    });

    // 将响应数据转为Blob对象，生成临时下载链接
    const blob = new Blob([response.data], { type: 'application/pdf' });
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.href = downloadUrl;
    link.setAttribute('download', 'report.pdf'); // 匹配后端设置的文件名
    document.body.appendChild(link);
    link.click();
    
    // 下载完成后清理临时资源
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('PDF下载失败:', error);
  }
};

方法二：使用原生Fetch #

如果用原生Fetch，同样需要将响应转为Blob，再手动触发下载：

const downloadReportPdf = async () => {
  try {
    const response = await fetch('/api/export-pdf', {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('authToken')}`
      }
    });

    if (!response.ok) {
      throw new Error('请求接口失败');
    }

    const blob = await response.blob();
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    
    link.href = downloadUrl;
    link.setAttribute('download', 'report.pdf');
    document.body.appendChild(link);
    link.click();
    
    // 清理临时资源
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('PDF下载失败:', error);
  }
};

3. 常见排查点 #

• 确认React请求的URL和浏览器直接访问的完全一致，检查开发环境的代理配置是否正确（避免跨域或路径错误）
• 打开浏览器控制台的Network面板，查看请求的响应状态码是否为200，响应头里是否包含Content-Disposition: attachment; filename="report.pdf"和Content-Type: application/pdf
• 如果接口需要认证，确保React请求携带的token和浏览器访问时的认证信息一致

内容的提问来源于stack exchange，提问作者Md. Nasir Uddin