Node.js Express：如何同时返回文件与数组作为响应

下面是几种符合HTTP标准的实现方式，可替代你当前自定义JSON包含Buffer的方案：

1. 利用HTTP自定义响应头传递元数据 #

这是最简单的方案，适合业务信息体积较小的场景（注意：浏览器对单个响应头的大小通常限制在8KB左右）：

• 将业务逻辑结果序列化为JSON字符串，放到自定义的响应头（比如X-Business-Metadata）中
• 同时返回文件流/Buffer，设置正确的文件类型和下载头

示例代码（Express后端）：

app.get('/api/download', async (req, res) => {
  // 调用后台业务逻辑获取元数据
  const businessResults = await fetchBusinessLogicData();
  // 获取要返回的文件Buffer
  const fileBuffer = await getTargetFileBuffer();

  // 设置自定义元数据头
  res.set('X-Business-Metadata', JSON.stringify(businessResults));
  // 设置文件相关响应头
  res.set('Content-Disposition', 'attachment; filename="target-file.pdf"');
  res.set('Content-Type', 'application/pdf');

  // 返回文件
  res.send(fileBuffer);
});

前端获取方式：

fetch('/api/download')
  .then(response => {
    // 从响应头取出元数据并解析
    const metadata = JSON.parse(response.headers.get('X-Business-Metadata'));
    // 处理文件
    return response.blob().then(blob => ({ metadata, blob }));
  })
  .then(({ metadata, blob }) => {
    // 渲染业务信息 + 处理文件下载
    console.log('业务结果:', metadata);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'target-file.pdf';
    a.click();
    URL.revokeObjectURL(url);
  });

2. 返回Multipart格式响应 #

这是HTTP标准的多内容响应方案，适合业务信息体积较大的场景，允许在一个响应中同时传递结构化数据和二进制文件：

• 使用form-data库构建multipart格式的响应，将元数据和文件作为两个独立的部分
• 前端通过FormData对象解析响应内容

示例代码（Express后端）：

const FormData = require('form-data');

app.get('/api/download', async (req, res) => {
  const businessResults = await fetchBusinessLogicData();
  const fileBuffer = await getTargetFileBuffer();

  const form = new FormData();
  // 添加元数据部分
  form.append('metadata', JSON.stringify(businessResults), {
    contentType: 'application/json'
  });
  // 添加文件部分
  form.append('file', fileBuffer, {
    filename: 'target-file.pdf',
    contentType: 'application/pdf'
  });

  // 设置multipart响应头
  res.setHeader('Content-Type', `multipart/form-data; boundary=${form.getBoundary()}`);
  // 将form流管道到响应
  form.pipe(res);
});

前端解析方式：

fetch('/api/download')
  .then(response => response.formData())
  .then(formData => {
    const metadata = JSON.parse(formData.get('metadata'));
    const file = formData.get('file');
    // 处理业务信息和文件
    console.log('业务结果:', metadata);
    // 文件下载逻辑
    const url = URL.createObjectURL(file);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'target-file.pdf';
    a.click();
    URL.revokeObjectURL(url);
  });

3. 分两次请求（先拿元数据，再下载文件） #

如果业务场景允许，这是最直观且无格式限制的方案：

1. 前端先调用/api/business-result接口获取业务逻辑结果
2. 再调用/api/download-file接口下载文件
3. 前端将两次请求的结果关联起来进行渲染和处理

方案对比 #

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