快捷導(dǎo)航

Node.js實(shí)現(xiàn)下載文件的兩種實(shí)用方式

更新時(shí)間：2022年09月05日 11:08:49 作者：二木成林

最近優(yōu)化了幾個(gè)新人寫出的動(dòng)態(tài)表格文件下載接口的性能瓶頸,感覺非常有必要總結(jié)一篇文章作為文檔來拋磚引玉,這篇文章主要給大家介紹了關(guān)于Node.js實(shí)現(xiàn)下載文件的兩種實(shí)用方式,需要的朋友可以參考下

第一種方式：使用原生的http模塊

我們僅需要用到fs和http兩個(gè)node.js的原生模塊，不需要安裝第三方模塊，就可以實(shí)現(xiàn)文件的下載。代碼如下：

var fs = require('fs');
var http = require("http");

var server = http.createServer();

server.on("request", function (request, response) {
    // 獲取請(qǐng)求URL
    var url = request.url;
    // 如果是下載文件的URL，則判斷進(jìn)行處理
    if (url === '/download/hello.txt') {
        // 提取文件名hello.txt
        var name = url.substring(url.lastIndexOf('/'));
        // 創(chuàng)建可讀流，讀取當(dāng)前項(xiàng)目目錄下的hello.txt文件
        var rs = fs.createReadStream(__dirname + "/" + name);
        // 設(shè)置響應(yīng)請(qǐng)求頭，200表示成功的狀態(tài)碼，headers表示設(shè)置的請(qǐng)求頭
        response.writeHead(200, {
            'Content-Type': 'application/force-download',
            'Content-Disposition': 'attachment; filename=' + name
        });
        // 將可讀流傳給響應(yīng)對(duì)象response
        rs.pipe(response);
    }
});

server.listen(8888, function () {
    console.log("服務(wù)器啟動(dòng)成功，可以通過 http://127.0.0.1:8888 來進(jìn)行訪問");
});

然后可以通過http://127.0.0.1:8888/download/hello.txt下載文件。

第二種方式：使用Express+Axios下載文件

前端通過axios發(fā)送GET或者POST請(qǐng)求來進(jìn)行文件的下載，關(guān)鍵是對(duì)響應(yīng)回來的文件數(shù)據(jù)進(jìn)行處理。

index.html：前端頁面，通過點(diǎn)擊按鈕來進(jìn)行下載文件，而請(qǐng)求是通過axios來發(fā)送的。

<!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) {
            // 將響應(yīng)回來的數(shù)據(jù)下載為文件，固定代碼
            // 將響應(yīng)數(shù)據(jù)處理為Blob類型
            var blob = new Blob([response.data]);
            // 創(chuàng)建一個(gè)URL對(duì)象
            var url = window.URL.createObjectURL(blob);
            // 創(chuàng)建一個(gè)a標(biāo)簽
            var a = document.createElement("a");
            a.href = url;
            a.download = "hello.txt";// 這里指定下載文件的文件名
            a.click();
            // 釋放之前創(chuàng)建的URL對(duì)象
            window.URL.revokeObjectURL(url);
        }).catch(function (reason) {
            console.log(reason)
        })
    }
</script>
</html>

index.js：使用express來渲染index.html頁面，并且來處理下載請(qǐng)求。

var fs = require('fs');
var express = require('express');

var app = express();

// 渲染index.html，跟下載邏輯無關(guān)
app.get('/index.html', function (request, response) {
    fs.readFile('index.html', function (err, data) {
        if (!err) {
            response.end(data);
        }
    });
});

// 處理下載文件的請(qǐng)求
app.post('/file/download', function (request, response) {
    var name = "hello.txt";// 待下載的文件名
    var path = __dirname + "/" + name;// 待下載文件的路徑，指定為當(dāng)前項(xiàng)目目錄下的hello.txt文件
    var f = fs.createReadStream(path);
    response.writeHead(200, {
        'Content-Type': 'application/force-download',
        'Content-Disposition': 'attachment; filename=' + name
    });
    f.pipe(response);
});

// 監(jiān)聽端口，相當(dāng)于原來的server.listen()
app.listen(8888, function () {
    console.log("app is running at port 8888.");
});

又可以通過response.set()方法來設(shè)置響應(yīng)頭：

    response.set({
        'Content-Type': 'application/octet-stream',// 告訴瀏覽器這是一個(gè)二進(jìn)制文件
        'Content-Disposition': 'attachment; filename=' + name// 告訴瀏覽器這是一個(gè)需要下載的文件
    });