前端通过fetch获取文件流并创建Blob URL，利用隐藏a标签触发下载；2. 后端使用Node.js的Express框架，通过res.download发送本地文件或res.send发送动态生成内容，并设置Content-Disposition响应头以触发浏览器下载；3. 对于大文件，采用fs.createReadStream进行流式传输，避免内存溢出；4. 跨域时需配置CORS并暴露Content-Disposition头部；5. 生产环境应增加权限校验确保安全。
文件下载功能在全栈JavaScript项目中非常常见，前端触发请求，后端生成或读取文件并返回响应。实现这一流程需要前后端协同处理，下面详细说明如何用Node.js（后端）和浏览器JavaScript（前端）完成文件下载。
前端：如何调用并触发文件下载
前端不直接“保存”文件，而是通过创建一个隐藏的 <a> 标签，模拟点击来触发浏览器下载行为。
常见场景包括：用户点击按钮下载某个资源，前端发送请求获取文件流，然后自动下载。
前端代码示例：使用 fetch 请求后端接口，接收 Blob 数据，创建临时下载链接：
立即学习“前端免费学习笔记（深入）”；
const downloadFile = async () => {
const response = await fetch('/api/download');
const blob = await response.blob();
// 创建临时URL
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt'; // 下载的文件名
document.body.appendChild(a);
a.click();
// 清理
window.URL.revokeObjectURL(url);
a.remove();
};
注意：如果后端在响应头中设置了 Content-Disposition: attachment; filename="xxx"，浏览器会自动触发下载，前端甚至不需要手动设置 a.download。
后端：Node.js 实现文件响应
使用 Express 框架可以快速实现文件下载接口。核心是设置正确的响应头，并将文件流式输出。
基本文件下载（本地文件）：假设你有一个 files/report.pdf 文件希望提供下载。
const express = require('express');
const path = require('path');
const app = express();
app.get('/api/download', (req, res) => {
const filePath = path.join(__dirname, 'files', 'report.pdf');
const fileName = '年度报告.pdf';
res.setHeader(
'Content-Disposition',
`attachment; filename="${encodeURIComponent(fileName)}"; filename*=UTF-8''${encodeURIComponent(fileName)}`
);
res.setHeader('Content-Type', 'application/pdf');
res.download(filePath, fileName, (err) => {
if (err) {
console.error('下载出错:', err);
res.status(500).send('文件不存在或下载失败');
}
});
});
res.download() 是 Express 提供的便捷方法，自动处理流传输和错误。
有时文件不是静态的，比如导出 CSV 报表。
app.get('/api/export-csv', (req, res) => {
const data = [
['姓名', '年龄', '城市'],
['张三', '25', '北京'],
['李四', '30', '上海']
];
let csvContent = data.map(row => row.join(',')).join('\n');
const buffer = Buffer.from(csvContent, 'utf-8');
res.setHeader('Content-Disposition', 'attachment; filename="用户列表.csv"');
res.setHeader('Content-Type', 'text/csv; charset=utf-8');
res.send(buffer);
});
这里使用 res.send() 发送 Buffer，配合正确的 Content-Type 和编码，确保中文不乱码。
跨域与安全注意事项
如果前端和后端不在同一域名，需启用 CORS，并允许相关头部。
const cors = require('cors');
app.use(cors({
exposedHeaders: ['Content-Disposition'] // 确保前端能读取到这个头
}));
某些浏览器在跨域时无法正确解析 Content-Disposition，所以暴露该头部很重要。
生产环境建议对下载接口做权限校验，例如检查用户登录状态或 token 合法性，防止未授权访问。
大文件与流式传输优化
对于大文件，避免一次性读入内存，应使用可读流。
const fs = require('fs');
app.get('/api/large-file', (req, res) => {
const filePath = path.join(__dirname, 'files', 'big.zip');
const stat = fs.statSync(filePath);
res.setHeader('Content-Disposition', 'attachment; filename="large.zip"');
res.setHeader('Content-Length', stat.size);
res.setHeader('Content-Type', 'application/octet-stream');
const stream = fs.createReadStream(filePath);
stream.pipe(res);
stream.on('error', () => {
res.status(500).send('流传输错误');
});
});
这样即使GB级文件也不会占用过多内存，适合视频、备份包等场景。
基本上就这些。前端用 fetch + blob + a标签触发下载，后端用 res.download 或流式响应返回文件，配合好响应头即可实现稳定可靠的下载功能。
