nodejs实现生成文件并在前端下载

nodejs生成文件并在前端下载

最近遇到一个小需求,前端要下载一个json文件,内容是对应数据的json对象。

看网上写的都太复杂了,只是下载一个小文件,只需要用到res.end()就够了。

前端

在a标签上加上download属性就可以点击下载文件了,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);

nodejs下载文件问题

第一种方式:使用原生的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'表示这是一个需要下载的附件,并且告诉浏览器默认文件名。

返回数据流

读取要下载的文件,以二进制流的形式响应给客户端。

作者:疯狂的火苗原文地址:https://blog.csdn.net/qq_43509220/article/details/124987213

%s 个评论

要回复文章请先登录注册