Express实现PDF下载时，文件传输完成才弹出保存窗口的问题

核心问题在于浏览器需要先收到响应头及部分响应体才会触发保存对话框，若服务器端因中间件缓冲或未及时发送响应头，就会导致等待文件完全传输后才弹窗。以下是针对性解决方案：

1. 排查并禁用下载路由的响应缓冲中间件 #

最常见的原因是压缩中间件（如compression）会缓冲大文件直到读取完成才发送响应，直接导致弹窗延迟。如果你的项目中使用了这类中间件，需排除下载路由：

const compression = require('compression');

// 全局启用压缩，但跳过下载接口
app.use(compression({
  filter: (req, res) => {
    if (req.path.includes('/your-download-route')) { // 替换为你的下载路由路径
      return false;
    }
    return compression.filter(req, res);
  }
}));

2. 手动控制响应头发送时机 #

显式设置响应头后立刻调用res.flushHeaders()强制发送头信息，再流式传输文件，确保浏览器第一时间收到触发弹窗的信号：

const path = require('path');
const fs = require('fs');

// 你的下载路由处理函数
app.get('/download', (req, res, next) => {
  const filePath = path.join(__dirname, serverPath.replace(/[/\]/g, path.sep));
  const fileName = pathDB.fileName;

  try {
    const stat = fs.statSync(filePath);
    
    // 设置精准的响应头，application/pdf比octet-stream更符合PDF类型
    res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Length', stat.size);
    res.setHeader('Accept-Ranges', 'bytes');
    res.setHeader('Last-Modified', stat.mtime.toUTCString());

    // 强制发送响应头，触发浏览器弹窗
    res.flushHeaders();

    // 流式传输文件
    const fileStream = fs.createReadStream(filePath);
    fileStream.on('error', next);
    fileStream.pipe(res);
    fileStream.on('end', () => {
      logger.info(`${order} - File:${fileName} from ${filePath} correctly Downloaded`);
    });
  } catch (err) {
    next(err);
  }
});

3. 响应头对比与优化说明 #

对比AMD的响应头，核心差异并非Transfer-Encoding: chunked（Content-Length和chunked都能正常触发弹窗），而是你的API可能因中间件缓冲延迟了响应头的发送。上述方案通过跳过缓冲、强制发送头信息，就能实现点击后立刻弹出保存窗口，用户确认后再继续传输文件的效果。

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