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

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

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

nodejs生成文件并在前端下載

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

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

前端

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

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

后端

響應(yīng)頭需要設(shè)置這兩個(gè)屬性“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下載文件問(wèn)題

第一種方式：使用原生的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)成功，可以通過(guò) http://127.0.0.1:8888 來(lái)進(jìn)行訪問(wèn)");
});

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

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

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

index.html：前端頁(yè)面，通過(guò)點(diǎn)擊按鈕來(lái)進(jìn)行下載文件，而請(qǐng)求是通過(guò)axios來(lái)發(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)回來(lái)的數(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來(lái)渲染index.html頁(yè)面，并且來(lái)處理下載請(qǐng)求。

var fs = require('fs');
var express = require('express');
var app = express();
// 渲染index.html，跟下載邏輯無(wú)關(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)聽(tīng)端口，相當(dāng)于原來(lái)的server.listen()
app.listen(8888, function () {
    console.log("app is running at port 8888.");
});

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

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

總結(jié)

下載文件其實(shí)很簡(jiǎn)單，在哪種語(yǔ)言里都是這樣：

第一步，設(shè)置響應(yīng)頭。
第二步，返回?cái)?shù)據(jù)流。

設(shè)置響應(yīng)頭

下載文件需要設(shè)置的響應(yīng)頭是Content-Type和Content-Disposition，響應(yīng)頭與編程語(yǔ)言無(wú)關(guān)，是通用的。

'Content-Type': 'application/octet-stream'表示這是一個(gè)二進(jìn)制文件。
'Content-Disposition': 'attachment;filename=hello.txt'表示這是一個(gè)需要下載的附件，并且告訴瀏覽器默認(rèn)文件名。

返回?cái)?shù)據(jù)流

讀取要下載的文件，以二進(jìn)制流的形式響應(yīng)給客戶端。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: