您现在的位置是:网站首页> 编程资料编程资料
nodejs实现生成文件并在前端下载_node.js_
                    
                
                2023-05-24
                637人已围观
            
简介 nodejs实现生成文件并在前端下载_node.js_
nodejs生成文件并在前端下载
最近遇到一个小需求,前端要下载一个json文件,内容是对应数据的json对象。
看网上写的都太复杂了,只是下载一个小文件,只需要用到res.end()就够了。
前端
在a标签上加上download属性就可以点击下载文件了,download可以赋值,值为下载之后的文件名。也可以留空,用原有的文件名。
后端
响应头需要设置这两个属性“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来发送的。
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'表示这是一个需要下载的附件,并且告诉浏览器默认文件名。
返回数据流
读取要下载的文件,以二进制流的形式响应给客户端。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
- Javascript前端下载后台传来的文件流代码实例
 - js使用文件流下载csv文件的实现方法
 - JavaScript进阶之前端文件上传和下载示例详解
 - javascript实现生成并下载txt文件方式
 - Node.js实现下载文件的两种实用方式
 - javascript Blob对象实现文件下载
 - JavaScript 中如何实现大文件并行下载
 - 前端 javascript 实现文件下载的示例
 - JavaScript实现多文件下载方法解析
 - javascript使用Blob对象实现的下载文件操作示例
 - 原生js实现文件上传、下载、封装等实例方法
 - JavaScript实现文件下载并重命名代码实例
 - js实现文件流式下载文件方法详解及完整代码
 
相关内容
- React 错误边界Error Boundary使用示例解析_React_
 - React less 实现纵横柱状图示例详解_React_
 - javascript实现生成并下载txt文件方式_javascript技巧_
 - 深入了解TypeScript中常用类型的使用_javascript技巧_
 - Vue项目使用svg图标实践_vue.js_
 - vue2+elementUI的el-tree的选中、高亮、定位功能的实现_vue.js_
 - vue3与elementui封装一个便捷Loading_vue.js_
 - 使用v-memo缓存模板子树提高应用性能详解_vue.js_
 - vue项目设置活性字体过程(自适应字体大小)_vue.js_
 - JavaScript Canvas实现噪点滤镜回忆童年电视雪花屏_JavaScript_
 
                                
                                                        
                                
                                                        
                                
                                                        
    