如何调用Express文件下载中间件实现页面渲染后触发下载提示

问题根因 #

HTTP 协议中单个请求只能对应一个响应，res.send()、res.download() 这类方法执行后就会发送完整的响应头和响应体，标记当前请求结束，后续再调用任意响应相关方法都会抛出错误，因此你尝试的同路由下通过中间件顺序控制双响应的方案是不可行的。

实现方案 #

需要拆分两个独立的 HTTP 请求实现需求：

• 第一个请求访问根路由，返回携带「Hello World」内容的 HTML 页面
• 页面加载完成后，前端自动触发第二个请求拉取下载资源，浏览器会保留当前页面展示的同时弹出下载提示

完整代码示例 #

const express = require('express')
const app = express()
const port = 3000

// 下载专用路由，仅处理文件返回逻辑
app.get('/download', (req, res) => {
  // 替换为实际的本地文件路径
  res.download('FILE/Path/Here', (err) => {
    if (err) {
      res.status(404).send('请求的文件不存在')
    }
  })
})

// 根路由，返回页面+自动触发下载的前端逻辑
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>示例页面</title>
    </head>
    <body>
      <h1>Hello World</h1>
      <script>
        // 页面完全加载后触发下载
        window.addEventListener('load', () => {
          // 创建隐藏iframe触发下载，不会跳转当前页面，无弹窗拦截问题
          const downloadIframe = document.createElement('iframe')
          downloadIframe.style.display = 'none'
          downloadIframe.src = '/download'
          document.body.appendChild(downloadIframe)
        })
      </script>
    </body>
    </html>
  `)
})

app.listen(port, () => {
  console.log(`服务已启动，访问地址：http://localhost:${port}`)
})

可选优化 #

如果不需要自动触发下载，也可以在页面中添加手动下载按钮，代码如下：

<button onclick="window.location.href='/download'">点击下载文件</button>

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