如何在React或JavaScript中将获取的流转换为PDF文件

我来帮你一步步修正代码，让获取到的PDF流能正确保存成可打开的PDF文件：

1. 修复服务层的请求配置 #

你的fetch调用存在两个关键问题：

• 请求头设置错误：Content-Type是用来告知后端你发送的内容类型，而我们需要的是告诉后端我们要接收PDF格式，所以应该用Accept: application/pdf。
• fetch的参数格式错误：第二个参数必须是配置对象，headers要嵌套在这个对象里。

修改后的服务代码：

import { ajax } from "rxjs/ajax";
export class AdminGrantTaskService {
  static async getCharityCheckStream(action) {
    const req = await fetch("/v2/", {
      headers: { 
        "Accept": "application/pdf" // 明确要求后端返回PDF格式
      }
    });

    // 增加请求成功校验，避免处理错误响应
    if (!req.ok) {
      throw new Error(`请求PDF流失败，状态码：${req.status}`);
    }

    return req;
  }
}

2. 修正组件层的文件保存逻辑 #

组件里主要的问题是文件名没有添加.pdf后缀，导致浏览器无法识别文件类型；另外增加错误处理能让调试更方便：

export default class CharityCheckReport extends Component {
  async componentDidMount() {
    try {
      const response = await AdminGrantTaskService.getCharityCheckStream();
      const pdfBlob = await response.blob();
      // 文件名加上.pdf后缀，确保浏览器正确识别
      FileSaver.saveAs(pdfBlob, "charity-check-report.pdf");
    } catch (error) {
      console.error("处理PDF流失败:", error);
      alert("生成慈善核查报告失败，请稍后重试");
    }
  }
}

额外注意事项 #

• 确认后端接口/v2/的响应头Content-Type为application/pdf，且返回的是正确的PDF二进制流（从你提供的流片段来看是符合的）。
• 可以在浏览器开发者工具的「网络」标签中查看该请求的响应，确认内容是PDF二进制数据，而非base64编码或其他格式。
• 如果你使用的是较旧版本的FileSaver，请确保它支持Blob类型的参数（新版FileSaver完全支持）。

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