nodejs实现生成文件并在前端下载
目录
- nodejs生成文件并在前端下载
- 前端
- 后端
- nodejs下载文件问题
- 第一种方式：使用原生的http模块
- 第二种方式：使用Express+Axios下载文件
- 总结
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'表示这是一个需要下载的附件，并且告诉浏览器默认文件名。
返回数据流
读取要下载的文件，以二进制流的形式响应给客户端。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
javascript使用Blob对象实现的下载文件操作示例
本文实例讲述了javascript使用Blob对象实现的下载文件操作.分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件. 前言 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏
-
Javascript前端下载后台传来的文件流代码实例
前台请求数据: url: '/app/downloadApp', method: 'get', responseType: 'blob', params: data 设置接收参数格式为responseType: 'blob', downloadFile(res, fileName) { if (!res) { return } if (window.navigator.msSaveBlob) { // IE以及IE内核的浏览器 try { window.navigator.msSaveBlob(
-
JavaScript实现多文件下载方法解析
对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择"另存为",这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存页面中的多个链接文件,就得重复操作很多次,最常见的就是英语听力网站上的音频下载,手都要点麻! 本文的目的是介绍如何利用 javascript 进行多文件的下载,也就是当用户点击某个链接或者按
-
JavaScript进阶之前端文件上传和下载示例详解
目录 文件下载 1.通过a标签点击直接下载 2.open或location.href 3.Blob和Base64 文件上传 文件上传思路 File文件 上传单个文件-客户端 上传文件-服务端 多文件上传-客户端 大文件上传-客户端 大文件上传-服务端 文件下载 1.通过a标签点击直接下载 <a href="https:xxx.xlsx" rel="external nofollow" download="test">下载文件</
-
原生js实现文件上传、下载、封装等实例方法
一 .下载 1.代码 const fileDownloadClick = (obj) => { // 解决兼容 if( document.all ){ obj.click(); } else { let event = document.createEvent("MouseEvents"); event.initEvent('click', true, true); obj.dispatchEvent(event); } } const fileDownload = (res,o
-
前端 javascript 实现文件下载的示例
在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接.示例: <a href="https://www.baidu.com" rel="external nofollow" download="baidu.html">下载</a> 1. 前端 js 下载实现与示例 通过 javascript 动态创建一个包含 download 属性的 a
-
javascript Blob对象实现文件下载
目录 说明 一.Blob对象 二.前端 三.后端 总结 说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何权限就直接下载,因此需要换种思路,在一番百度之后,了解到了blob对象,这就是本文要讲的内容 注意:本文仅为记录学习轨迹,如有侵权,联系删除 一.Blob对象 Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数
-
Node.js实现下载文件的两种实用方式
目录 第一种方式:使用原生的http模块 第二种方式:使用Express+Axios下载文件 总结 设置响应头 返回数据流 第一种方式:使用原生的http模块 我们仅需要用到fs和http两个node.js的原生模块,不需要安装第三方模块,就可以实现文件的下载.代码如下: var fs = require('fs'); var http = require("http"); var server = http.createServer(); server.on("reques
-
js实现文件流式下载文件方法详解及完整代码
JS实现流式打包下载说明 浏览器中的流式操作可以节省内存,扩大 JS 的应用边界,比如我们可以在浏览器里进行视频剪辑,而不用担心视频文件将内存撑爆. 浏览器虽然有流式处理数据的 API,并没有直接提供给 JS 进行流式下载的能力,也就是说即使我们可以流式的处理数据,但想将其下载到磁盘上时,依然会对内存提出挑战. 这也是我们讨论的前提: 流式的操作,必须整个链路都是流式的才有意义,一旦某个环节是非流式(阻塞)的,就无法起到节省内存的作用. 本篇文章分析了如何在 JS中流式的处理数据 ,流式的进行下
-
js使用文件流下载csv文件的实现方法
理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了. 现在我们开始来理解下Bolb对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧 1. 创建Blob对象方式如下: var blob = new Blob(dataArray, options); dataArray: 它是一个数组,它包含了要添加到Blob对象中的数据.数组可以是二进制对象或者字符串. options是可选的对
-
JavaScript 中如何实现大文件并行下载
目录 一.HTTP 范围请求 1.1 Range 语法 二.如何实现大文件下载 2.1 定义辅助函数 2.2 大文件下载使用示例 三.总结 相信有些小伙伴已经了解大文件上传的解决方案,在上传大文件时,为了提高上传的效率,我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割,然后在开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并. 那么对大文件下载来说,我们能否采用类似的思想呢?在服务端支持 Range 请求首部的条件下,我们也是可以实现多线程分块下载的
-
javascript实现生成并下载txt文件方式
目录 js生成并下载txt文件 下表显示了FileSaver.js在不同浏览器中的兼容性 js导出文件为txt并下载 首先HTML结构使用最简单的结构 然后js js生成并下载txt文件 下面的简单函数允许您直接在浏览器中生成文件,而无需接触任何服务器. 它适用于所有HTML5就绪的浏览器,因为它使用了<a>的下载属性: function download(filename, text) { var element = document.createElement('a'); elem
-
JavaScript实现文件下载并重命名代码实例
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一种是HTML官网中的方法 <a href="/images/liang.jpg" rel="external nofollow" download="文件名称"> HTML5 中 a 标签提供了一个 filename 属性,可以下载成指定的 download 属性名称