Nodejs新手：请问下怎么使用express页面上导出csv或excel文件

Nodejs新手：请问下怎么使用express页面上导出csv或excel文件

找了好多贴子都是直接在本下生成的，找不着好的工具，我想要在页面上点击就直接下载

给个地址就行～～ 非常感谢啊，

5 回复

当然可以。在Express应用中，我们可以使用一些库来帮助我们在用户点击按钮时直接从浏览器下载CSV或Excel文件。这里我会介绍如何使用express配合csv-writer库来创建CSV文件，以及如何使用exceljs库来创建Excel文件。

CSV文件导出

首先，你需要安装csv-writer库：

npm install csv-writer

然后，在你的Express路由中添加如下代码：

const createCsvWriter = require('csv-writer').createObjectCsvWriter;

app.get('/download-csv', (req, res) => {
    const csvWriter = createCsvWriter({
        path: 'file.csv',
        header: [
            {id: 'name', title: 'NAME'},
            {id: 'age', title: 'AGE'}
        ]
    });

    const records = [
        {name: 'John Doe', age: 30},
        {name: 'Jane Doe', age: 25}
    ];

    csvWriter.writeRecords(records)
        .then(() => {
            res.download('file.csv');
        });
});

这段代码定义了一个GET路由/download-csv，当访问这个路由时，会创建一个包含两行数据的CSV文件，并通过res.download()方法触发浏览器下载。

Excel文件导出

接下来，我们使用exceljs库来导出Excel文件：

首先，安装exceljs：

npm install exceljs

然后，添加如下代码到你的Express路由中：

const ExcelJS = require('exceljs');

app.get('/download-excel', async (req, res) => {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Sheet1');

    worksheet.columns = [
        {header: 'Name', key: 'name', width: 15},
        {header: 'Age', key: 'age', width: 10}
    ];

    worksheet.addRow({name: 'John Doe', age: 30});
    worksheet.addRow({name: 'Jane Doe', age: 25});

    res.setHeader(
        'Content-Type',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    );
    res.setHeader(
        'Content-Disposition',
        'attachment;filename=example.xlsx'
    );

    await workbook.xlsx.write(res);
    res.end();
});

这段代码创建了一个新的Excel工作簿，向其中添加了一张工作表，并填充了数据。最后，它将Excel文件发送给客户端进行下载。

这两个例子展示了如何使用Express和相关的库来实现点击按钮后直接从浏览器下载CSV或Excel文件的功能。希望这对你有帮助！


    var rawCSV = 'your string';

    // 设置 header 使浏览器下载文件
    res.setHeader('Content-Description', 'File Transfer');
    res.setHeader('Content-Type', 'application/csv; charset=utf-8');
    res.setHeader('Content-Disposition', 'attachment; filename=data.csv');
    res.setHeader('Expires', '0');
    res.setHeader('Cache-Control', 'must-revalidate');

    // 为了让 Windows 能识别 utf-8，加上了 dom
    res.send('\uFEFF' + rawCSV);

BOM

解决了，直接用csv模块生成内容后，就可以直接放进send里就ok了， 推荐个json2csv这个模块挺好用的 https://github.com/zeMirco/json2csv

要在页面上实现点击后直接下载CSV或Excel文件，可以使用Express来处理服务器端的逻辑，并结合相应的库来生成文件。这里以CSV和Excel为例，我会分别介绍如何生成这两种文件。

导出CSV文件

  1. 安装express和csv-writer库：
npm install express csv-writer
  1. 创建一个简单的Express应用来处理下载请求：
const express = require('express');
const createCsvWriter = require('csv-writer').createObjectCsvWriter;

const app = express();
const port = 3000;

app.get('/download/csv', async (req, res) => {
    const csvWriter = createCsvWriter({
        path: 'file.csv',
        header: [
            {id: 'id', title: 'ID'},
            {id: 'name', title: 'NAME'}
        ]
    });

    await csvWriter.writeRecords([ // returns when write completes
        {id: 1, name: 'John Doe'},
        {id: 2, name: 'Jane Doe'}
    ]); 

    res.download('file.csv', 'data.csv'); // Set disposition and send it.
});

app.listen(port, () => console.log(`Server running on http://localhost:${port}`));

导出Excel文件

对于Excel文件，可以使用xlsx库：

  1. 安装所需的库：
npm install express xlsx
  1. 创建Express应用来处理Excel文件下载：
const express = require('express');
const xlsx = require('xlsx');

const app = express();
const port = 3000;

app.get('/download/excel', (req, res) => {
    const data = [
        ['ID', 'Name'],
        [1, 'John Doe'],
        [2, 'Jane Doe']
    ];

    const workbook = xlsx.utils.book_new();
    const worksheet = xlsx.utils.aoa_to_sheet(data);
    xlsx.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    
    xlsx.writeFile(workbook, 'file.xlsx');
    res.download('file.xlsx', 'data.xlsx'); // Set disposition and send it.
});

app.listen(port, () => console.log(`Server running on http://localhost:${port}`));

页面实现

为了使用户能够点击按钮下载文件，你需要创建一个简单的HTML页面，包含一个指向上述路由的链接或者按钮：

<!DOCTYPE html>
<html>
<head>
    <title>Download CSV/Excel</title>
</head>
<body>
    <h1>Click to download CSV or Excel file:</h1>
    <a href="/download/csv">Download CSV</a><br/>
    <a href="/download/excel">Download Excel</a>
</body>
</html>

将上述HTML保存为一个HTML文件并放到静态目录中（例如public），然后可以通过路由访问它。这样，当用户点击链接时，服务器会生成相应格式的文件并触发下载。

以上就是如何在Express应用中实现点击按钮下载CSV或Excel文件的方法。希望这对你有所帮助！

回到顶部