在Express 4路由响应中发送PDF并强制浏览器下载的正确方法

看起来你卡在了「Express返回PDF但浏览器不触发下载」这个点上，其实问题出在客户端的fetch处理方式和服务端响应头/路径的细节上，我来一步步帮你解决：

一、服务端的正确实现（Express 4） #

Express已经封装了非常省心的res.download()方法，它会自动帮你设置正确的响应头（Content-Type、Content-Disposition），还能规避路径相关的坑，你之前的代码里冗余的头设置反而容易出问题。

优化后的服务端代码： #

const path = require('path'); // 记得引入path模块处理路径

router.post('/', (req, res, next) => {
  const html = // 你的HTML模板内容
  const options = { format: 'Letter' };
  const fileName = 'report.pdf';
  // 用path.resolve生成绝对路径，避免不同环境下的相对路径错误
  const filePath = path.resolve(__dirname, '../downloads/report.pdf');

  pdf.create(html, options).toFile(filePath, (err) => {
    if (err) {
      console.error(err);
      return res.status(500).json({ error: '生成PDF失败' });
    }

    // res.download会自动处理所有必要响应头，无需手动重复设置
    res.download(filePath, fileName, (err) => {
      if (err) {
        // 错误处理：确保响应未发送时返回错误状态
        if (!res.headersSent) {
          return res.status(404).json({ error: '文件未找到' });
        }
      }
    });
  });
});

关键注意点：

• 用path.resolve()生成绝对路径：Express的文件操作方法默认以项目根目录为基准，绝对路径能避免开发/生产环境的路径差异问题。
• 不要重复设置Content-Type：res.download()会根据文件后缀自动匹配正确的类型（application/pdf），手动重复设置可能导致冲突。
• 完善错误处理：PDF生成失败时要返回明确的错误状态码，不要只在控制台打印。

二、客户端的核心问题：fetch不会自动触发下载 #

你原来的客户端代码用了response.json()，这会把PDF二进制数据当成JSON解析，完全不符合预期；更重要的是，fetch API本身只是获取数据，不会自动唤起浏览器的下载框，需要你手动处理Blob并触发下载行为。

优化后的客户端代码： #

function setImage() {
  html2canvas(document.querySelector('#chart')).then(canvas => {
    canvas.toBlob(function(blob) {
      const url = 'http://localhost:3000/api/v1/pdf';
      fetch(url, {
        method: 'POST',
        headers: {
          'Content-type': 'application/octet-stream',
        },
        body: blob,
      })
      .then(response => {
        // 先校验响应是否成功
        if (!response.ok) {
          throw new Error('请求失败，请稍后重试');
        }
        // 将响应转为Blob类型（适配PDF二进制数据）
        return response.blob();
      })
      .then(pdfBlob => {
        // 创建临时URL指向Blob文件
        const pdfUrl = URL.createObjectURL(pdfBlob);
        // 创建a标签模拟点击触发下载
        const downloadLink = document.createElement('a');
        downloadLink.href = pdfUrl;
        downloadLink.download = 'report.pdf'; // 指定下载文件名
        document.body.appendChild(downloadLink);
        downloadLink.click();
        // 下载完成后释放临时URL，避免内存泄漏
        URL.revokeObjectURL(pdfUrl);
        document.body.removeChild(downloadLink);
      })
      .catch(error => console.error('下载失败:', error));
    }, 'image/png', 1);
    document.body.appendChild(canvas);
  });
}

关键修改点：

• 替换response.json()为response.blob()：正确解析PDF的二进制数据。
• 手动创建a标签触发下载：这是浏览器唤起下载框的标准方式，fetch本身不具备这个能力。
• 释放临时URL：用完URL.createObjectURL()生成的链接后，一定要调用URL.revokeObjectURL()清理内存。

为什么你之前的写法没生效？ #

• 服务端第一种写法：同时用res.setHeader()和res.download()，后者会覆盖手动设置的头，虽然不致命，但属于冗余操作。
• 服务端第二种写法：重复设置多次Content-Type，浏览器只会识别最后一个；且res.sendFile()用了相对路径，容易出现文件找不到的情况。
• 最核心的问题还是客户端：错误地将二进制PDF数据解析为JSON，且没有手动触发下载行为。

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