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

更新时间：2022年09月19日 10:39:47 作者：疯狂的火苗

这篇文章主要介绍了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'表示这是一个需要下载的附件，并且告诉浏览器默认文件名。

返回数据流

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用Node.js实现一个简单的命令行工具
这篇文章主要为大家详细介绍了如何用 Node.js 实现一个简单的命令行工具,模仿常用的 ls 命令,包括其 -a 和 -l 参数的功能,感兴趣的可以了解下
2024-11-11
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
这篇文章主要介绍了详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
这篇文章主要介绍了零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门,本文在windows8系统下完成本教程,其它系统也可参考,需要的朋友可以参考下
2014-12-12
npm安装时的错误排查的方法
在我们的日常工作中,使用npm来安装依赖是非常常见的,然而,有时候安装过程中会遇到各种各样的报错,本文主要介绍了npm安装时的错误排查的方法,感兴趣的可以了解一下
2024-08-08
Node.js中Bootstrap-table的两种分页的实现方法
这篇文章主要介绍了Node.js中Bootstrap-table的两种分页的使用方法,需要的朋友可以参考下
2017-09-09
Node学习笔记：Node.js安装及环境配置史诗级详细版【含测试与镜像说明】
这篇文章主要介绍了Node学习笔记之Node.js安装及环境配置方法,详细分析了node.js的基本安装、配置、环境变量设置、以及环境测试与镜像使用说明,需要的朋友可以参考下
2023-05-05
NodeJS服务器实现gzip压缩的示例代码
这篇文章主要介绍了NodeJS服务器实现gzip压缩的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
在node中如何调用python脚本
这篇文章主要介绍了在node中如何调用python脚本，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Node.js的环境安装配置(使用nvm方式)
在我们前端开发工程中,很多繁琐机械的操作都是会慢慢的被抽离出来的,比如当我们为dom操作和浏览器兼容性感到厌烦时,jQuery出现了,随着时间的发展,JavaScript现在被应用到了服务器中,但是首先第一步我们要学会如何安装配置Node.js的环境，本文是使用nvm方式，来一起看看。
2016-10-10
Node.js学习入门
本文主要介绍了Node.js的入门知识，包括：Node.js的特点，运行环境以及应用小例。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01