nodejs實現(xiàn)生成文件并在前端下載

更新時間：2022年09月19日 10:39:47 作者：瘋狂的火苗

這篇文章主要介紹了nodejs實現(xiàn)生成文件并在前端下載，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

nodejs生成文件并在前端下載

最近遇到一個小需求，前端要下載一個json文件，內(nèi)容是對應(yīng)數(shù)據(jù)的json對象。

看網(wǎng)上寫的都太復(fù)雜了，只是下載一個小文件，只需要用到res.end()就夠了。

前端

在a標簽上加上download屬性就可以點擊下載文件了，download可以賦值，值為下載之后的文件名。也可以留空，用原有的文件名。

<a href="/xxxxx" rel="external nofollow"  download>導(dǎo)出</a>

后端

響應(yīng)頭需要設(shè)置這兩個屬性“Content-type”，“Content-Disposition”

然后用res.end()寫入數(shù)據(jù)，數(shù)據(jù)一定是字符串形式。

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的原生模塊，不需要安裝第三方模塊，就可以實現(xiàn)文件的下載。代碼如下：

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('/'));
        // 創(chuàng)建可讀流，讀取當(dāng)前項目目錄下的hello.txt文件
        var rs = fs.createReadStream(__dirname + "/" + name);
        // 設(shè)置響應(yīng)請求頭，200表示成功的狀態(tài)碼，headers表示設(shè)置的請求頭
        response.writeHead(200, {
            'Content-Type': 'application/force-download',
            'Content-Disposition': 'attachment; filename=' + name
        });
        // 將可讀流傳給響應(yīng)對象response
        rs.pipe(response);
    }
});
server.listen(8888, function () {
    console.log("服務(wù)器啟動成功，可以通過 http://127.0.0.1:8888 來進行訪問");
});

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

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

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

index.html：前端頁面，通過點擊按鈕來進行下載文件，而請求是通過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)建一個URL對象
            var url = window.URL.createObjectURL(blob);
            // 創(chuàng)建一個a標簽
            var a = document.createElement("a");
            a.href = url;
            a.download = "hello.txt";// 這里指定下載文件的文件名
            a.click();
            // 釋放之前創(chuàng)建的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，跟下載邏輯無關(guān)
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;// 待下載文件的路徑，指定為當(dā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',// 告訴瀏覽器這是一個二進制文件
        'Content-Disposition': 'attachment; filename=' + name// 告訴瀏覽器這是一個需要下載的文件
    });