Node.js实现前端文件下载：原生HTTP与Express方案详解
本文介绍如何在Node.js中实现前端文件下载功能。通过原生HTTP模块和Express框架两种方案，详细讲解如何设置Content-Type和Content-Disposition响应头，利用res.end()或文件流返回数据。前端结合Axios处理Blob响应实现下载，适用于JSON或二进制文件的场景。
Node.js实现生成文件并在前端下载
近期遇到一个小型需求：前端需下载一个包含对应数据JSON对象的JSON文件。
网上教程过于复杂，下载小文件仅需使用res.end()即可。
前端
在a标签添加download属性即可点击下载，该属性可赋值为下载后的文件名，也可留空以保留原文件名。
<a href="/xxxxx" rel="external nofollow" download>导出</a>后端
需设置响应头属性“Content-type”与“Content-Disposition”。
随后使用res.end()写入数据，数据必须为字符串形式。
filename代表文件名
var jsonstr_data = JSON.stringify(obj);
res.set({
"Content-type":"application/octet-stream",
"Content-Disposition":"attachment;filename="+encodeURI(filename)
});
res.end(jsonstr_data);
Node.js下载文件问题
第一种方式：使用原生http模块
仅需fs和http两个Node.js原生模块，无需安装第三方库即可实现文件下载。代码如下：
var fs = require('fs');
var http = require("http");
var server = http.createServer();
server.on("request", function (request, response) {
// 获取请求URL
var url = request.url;
// 如果是下载文件的URL，则判断进行处理
if (url === '/download/hello.txt') {
// 提取文件名hello.txt
var name = url.substring(url.lastIndexOf('/'));
// 创建可读流，读取当前项目目录下的hello.txt文件
var rs = fs.createReadStream(__dirname + "/" + name);
// 设置响应请求头，200表示成功的状态码，headers表示设置的请求头
response.writeHead(200, {
'Content-Type': 'application/force-download',
'Content-Disposition': 'attachment; filename=' + name
});
// 将可读流传给响应对象response
rs.pipe(response);
}
});
server.listen(8888, function () {
console.log("服务器启动成功，可以通过 http://127.0.0.1:8888 来进行访问");
});
随后可通过http://127.0.0.1:8888/download/hello.txt下载文件。
第二种方式：使用Express+Axios下载文件
前端通过axios发送GET或POST请求下载文件，关键在于处理响应回来的文件数据。
index.html：前端页面，通过点击按钮下载文件，请求由axios发送。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入axios.js -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<button onclick="downloadFile()">下载</button>
</body>
<script>
function downloadFile() {
axios({
url: '/file/download',
method: 'POST',
responseType: 'blob'
}).then(function (response) {
// 将响应回来的数据下载为文件，固定代码
// 将响应数据处理为Blob类型
var blob = new Blob([response.data]);
// 创建一个URL对象
var url = window.URL.createObjectURL(blob);
// 创建一个a标签
var a = document.createElement("a");
a.href = url;
a.download = "hello.txt";// 这里指定下载文件的文件名
a.click();
// 释放之前创建的URL对象
window.URL.revokeObjectURL(url);
}).catch(function (reason) {
console.log(reason)
})
}
</script>
</html>
index.js：使用Express渲染index.html页面，并处理下载请求。
var fs = require('fs');
var express = require('express');
var app = express();
// 渲染index.html，跟下载逻辑无关
app.get('/index.html', function (request, response) {
fs.readFile('index.html', function (err, data) {
if (!err) {
response.end(data);
}
});
});
// 处理下载文件的请求
app.post('/file/download', function (request, response) {
var name = "hello.txt";// 待下载的文件名
var path = __dirname + "/" + name;// 待下载文件的路径，指定为当前项目目录下的hello.txt文件
var f = fs.createReadStream(path);
response.writeHead(200, {
'Content-Type': 'application/force-download',
'Content-Disposition': 'attachment; filename=' + name
});
f.pipe(response);
});
// 监听端口，相当于原来的server.listen()
app.listen(8888, function () {
console.log("app is running at port 8888.");
});
还可通过response.set()方法设置响应头：
response.set({
'Content-Type': 'application/octet-stream',// 告诉浏览器这是一个二进制文件
'Content-Disposition': 'attachment; filename=' + name// 告诉浏览器这是一个需要下载的文件
});
总结
下载文件其实很简单，在任何语言中均如此：
- 第一步，设置响应头。
- 第二步，返回数据流。
设置响应头
下载文件需设置的响应头为Content-Type和Content-Disposition，与编程语言无关，属通用标准。
'Content-Type': 'application/octet-stream'表示这是一个二进制文件。'Content-Disposition': 'attachment;filename=hello.txt'表示这是一个需要下载的附件，并且告诉浏览器默认文件名。
返回数据流
读取要下载的文件，以二进制流的形式响应给客户端。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
Node.js 安装配置与第一个 HTTP 服务器编写
2026-11-05 11:41:40
怎么使用 nvm 管理并平滑升级 Node.js 版本
2026-11-04 23:15:07
Node.js 怎么使用 zlib 模块解压 gzip 和 deflate
2026-11-03 23:40:50
直接覆盖安装还是用版本管理器？Node.js 升级方式对比
2026-11-03 22:59:07
Express.js 是什么：Node.js Web 框架核心概念与适用场景
2026-11-03 20:00:12