Node.js实现下载文件的两种实用方式

目录
  • 第一种方式：使用原生的http模块
  • 第二种方式：使用Express+Axios下载文件
  • 总结
    • 设置响应头
    • 返回数据流

第一种方式：使用原生的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下载文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript Blob对象实现文件下载

    目录 说明 一.Blob对象 二.前端 三.后端 总结 说明 最近遇到一个需求,文件下载,但需要鉴权,这就意味着不能用后台返回下载链接的方式进行下载,因为一旦被别人拿到这条链接,就可以不需要任何权限就直接下载,因此需要换种思路,在一番百度之后,了解到了blob对象,这就是本文要讲的内容 注意:本文仅为记录学习轨迹,如有侵权,联系删除 一.Blob对象 Blob 对象表示一个不可变.原始数据的类文件对象.它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数

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

    目录 nodejs生成文件并在前端下载 前端 后端 nodejs下载文件问题 第一种方式:使用原生的http模块 第二种方式:使用Express+Axios下载文件 总结 nodejs生成文件并在前端下载 最近遇到一个小需求,前端要下载一个json文件,内容是对应数据的json对象. 看网上写的都太复杂了,只是下载一个小文件,只需要用到res.end()就够了. 前端 在a标签上加上download属性就可以点击下载文件了,download可以赋值,值为下载之后的文件名.也可以留空,用原有的文件

  • 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 href 属性上的链接.示例: <a href="https://www.baidu.com" rel="external nofollow" download="baidu.html">下载</a> 1. 前端 js 下载实现与示例 通过 javascript 动态创建一个包含 download 属性的 a

  • 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 属性名称

  • js实现文件流式下载文件方法详解及完整代码

    JS实现流式打包下载说明 浏览器中的流式操作可以节省内存,扩大 JS 的应用边界,比如我们可以在浏览器里进行视频剪辑,而不用担心视频文件将内存撑爆. 浏览器虽然有流式处理数据的 API,并没有直接提供给 JS 进行流式下载的能力,也就是说即使我们可以流式的处理数据,但想将其下载到磁盘上时,依然会对内存提出挑战. 这也是我们讨论的前提: 流式的操作,必须整个链路都是流式的才有意义,一旦某个环节是非流式(阻塞)的,就无法起到节省内存的作用. 本篇文章分析了如何在 JS中流式的处理数据 ,流式的进行下

  • javascript使用Blob对象实现的下载文件操作示例

    本文实例讲述了javascript使用Blob对象实现的下载文件操作.分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象就是继承自Blob对象,且在Blob的基础上进行扩展,以便支持用户系统上的文件. 前言 最近在做以post请求方式导出excel时,想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理,最后使用URL生成链接,供浏

  • 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 中如何实现大文件并行下载

    JavaScript 中如何实现大文件并行下载

    目录 一.HTTP 范围请求 1.1 Range 语法 二.如何实现大文件下载 2.1 定义辅助函数 2.2 大文件下载使用示例 三.总结 相信有些小伙伴已经了解大文件上传的解决方案,在上传大文件时,为了提高上传的效率,我们一般会使用 Blob.slice 方法对大文件按照指定的大小进行切割,然后在开启多线程进行分块上传,等所有分块都成功上传后,再通知服务端进行分块合并. 那么对大文件下载来说,我们能否采用类似的思想呢?在服务端支持 Range 请求首部的条件下,我们也是可以实现多线程分块下载的

  • js使用文件流下载csv文件的实现方法

    理解Blob对象 在Blob对象出现之前,在javascript中一直没有比较好的方式处理二进制文件,自从有了Blob了,我们就可以使用它操作二进制数据了. 现在我们开始来理解下Bolb对象及它的文件流下载应用场景,话不多说了,来一起看看详细的介绍吧 1. 创建Blob对象方式如下: var blob = new Blob(dataArray, options); dataArray: 它是一个数组,它包含了要添加到Blob对象中的数据.数组可以是二进制对象或者字符串. options是可选的对

  • JavaScript实现多文件下载方法解析

    对于文件的下载,可以说是一个十分常见的话题,前端的很多项目中都会有这样的需求,比如 highChart 统计图的导出,在线图片编辑中的图片保存,在线代码编辑的代码导出等等.而很多时候,我们只给了一个链接,用户需要右键点击链接,然后选择"另存为",这个过程虽说不麻烦,但还是需要两步操作,倘若用户想保存页面中的多个链接文件,就得重复操作很多次,最常见的就是英语听力网站上的音频下载,手都要点麻! 本文的目的是介绍如何利用 javascript 进行多文件的下载,也就是当用户点击某个链接或者按

  • 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(

随机推荐