React中拿到文件原始数据后如何实现正常下载？

Postman请求正常是因为工具默认自动识别并保留二进制响应格式，你的Node.js服务默认将API返回的PDF二进制内容按UTF-8字符串解析，直接破坏了PDF的文件结构，导致最终输出异常。

• 发起旧系统API请求时，强制指定响应格式为二进制，禁止自动转字符串：
  如果你使用axios发起请求，示例配置如下：

  const axios = require('axios');
  const fs = require('fs');
  
  axios.get('旧系统API地址', {
    // 核心配置：指定响应类型为ArrayBuffer，保留原始二进制数据
    responseType: 'arraybuffer'
  }).then(res => {
    // 此处res.data就是完整的PDF二进制Buffer，可直接使用
    const pdfBuffer = res.data;
  
    // 方案1：后端直接返回给前端时设置正确响应头
    // res.setHeader('Content-Type', 'application/pdf');
    // res.setHeader('Content-Disposition', 'attachment; filename="output.pdf"');
    // res.setHeader('Content-Length', pdfBuffer.length);
    // res.send(pdfBuffer);
  
    // 方案2：如果需要先存到本地
    // fs.writeFileSync('./output.pdf', pdfBuffer);
  })
  

  如果你使用Node.js原生http/https模块，需要手动收集二进制chunk，不要调用toString()：

  const https = require('https');
  https.get('旧系统API地址', (res) => {
    const chunks = [];
    res.on('data', (chunk) => chunks.push(chunk));
    res.on('end', () => {
      const pdfBuffer = Buffer.concat(chunks);
      // 后续处理逻辑同上面axios示例
    })
  })
  

• 禁止对获取到的Buffer执行任何编码转换操作，比如转UTF-8字符串、拼接非二进制内容等，会直接破坏PDF结构。

如果后端已经返回正确的二进制PDF流，前端按以下逻辑处理即可触发正常下载：

// 以fetch请求为例
fetch('你的Node.js后端接口地址')
  .then(res => res.blob())
  .then(blob => {
    // 生成临时下载链接
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '文件名称.pdf';
    document.body.appendChild(a);
    a.click();
    // 清理临时资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  })

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