1. PingCode智库首页
  2. 百科

js 怎么导出excel表格数据

Edit1 • • 百科

js 怎么导出excel表格数据

导出Excel表格数据的核心方法包括：使用JavaScript库、手动创建Excel文件、使用服务器端工具。 其中，使用JavaScript库 是最常见和便捷的方法。JavaScript库如SheetJS (xlsx)、ExcelJS等，可以轻松生成和导出Excel文件。以下将详细介绍如何使用这些库来导出Excel表格数据。

一、使用SheetJS (xlsx)库

SheetJS (xlsx)是一个强大的JavaScript库，专门用于处理Excel文件。它提供了丰富的API，支持读写Excel文件，非常适合在前端项目中使用。

1、安装SheetJS库

首先，你需要在项目中安装SheetJS库。可以使用npm或yarn进行安装：

npm install xlsx

或者

yarn add xlsx

2、创建和导出Excel文件

创建一个简单的HTML页面和JavaScript文件，演示如何使用SheetJS库导出Excel文件。

HTML代码：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Export Excel</title>


</head>


<body>


    <button id="export-button">Export to Excel</button>


    <script src="script.js"></script>


</body>


</html>

JavaScript代码（script.js）：

document.getElementById('export-button').addEventListener('click', function() {


    // 导入SheetJS库


    const XLSX = require('xlsx');


    // 创建一些数据


    const data = [


        ["Name", "Age", "Email"],


        ["John Doe", 28, "john.doe@example.com"],


        ["Jane Doe", 32, "jane.doe@example.com"]


    ];


    // 将数据转换为工作表


    const ws = XLSX.utils.aoa_to_sheet(data);


    // 创建一个新的工作簿


    const wb = XLSX.utils.book_new();


    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");


    // 导出Excel文件


    XLSX.writeFile(wb, "data.xlsx");


});

3、详细说明

导入SheetJS库：使用require('xlsx')导入SheetJS库。

创建数据：使用一个数组来定义数据。每个子数组代表一行数据。

转换为工作表：使用XLSX.utils.aoa_to_sheet(data)将数据转换为工作表。

创建工作簿并添加工作表：使用XLSX.utils.book_new()创建一个新的工作簿，然后使用XLSX.utils.book_append_sheet(wb, ws, "Sheet1")将工作表添加到工作簿中。

导出Excel文件：使用XLSX.writeFile(wb, "data.xlsx")导出Excel文件。

二、使用ExcelJS库

ExcelJS是另一个功能强大的JavaScript库，专门用于创建、读取和操作Excel文件。与SheetJS相比，ExcelJS提供了更多的样式和格式化选项。

1、安装ExcelJS库

同样的，你需要在项目中安装ExcelJS库。可以使用npm或yarn进行安装：

npm install exceljs

或者

yarn add exceljs

2、创建和导出Excel文件

创建一个简单的HTML页面和JavaScript文件，演示如何使用ExcelJS库导出Excel文件。

HTML代码：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Export Excel</title>


</head>


<body>


    <button id="export-button">Export to Excel</button>


    <script src="script.js"></script>


</body>


</html>

JavaScript代码（script.js）：

document.getElementById('export-button').addEventListener('click', function() {


    // 导入ExcelJS库


    const ExcelJS = require('exceljs');


    // 创建一个新的工作簿


    const workbook = new ExcelJS.Workbook();


    const worksheet = workbook.addWorksheet('Sheet1');


    // 添加表头


    worksheet.columns = [


        { header: 'Name', key: 'name', width: 20 },


        { header: 'Age', key: 'age', width: 10 },


        { header: 'Email', key: 'email', width: 30 }


    ];


    // 添加数据


    worksheet.addRow({ name: 'John Doe', age: 28, email: 'john.doe@example.com' });


    worksheet.addRow({ name: 'Jane Doe', age: 32, email: 'jane.doe@example.com' });


    // 导出Excel文件


    workbook.xlsx.writeBuffer().then(function(buffer) {


        const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });


        const url = window.URL.createObjectURL(blob);


        const a = document.createElement('a');


        a.href = url;


        a.download = 'data.xlsx';


        a.click();


        window.URL.revokeObjectURL(url);


    });


});

3、详细说明

导入ExcelJS库：使用require('exceljs')导入ExcelJS库。

创建工作簿和工作表：使用new ExcelJS.Workbook()创建一个新的工作簿，然后使用workbook.addWorksheet('Sheet1')添加一个工作表。

添加表头：使用worksheet.columns定义表头和列属性。

添加数据：使用worksheet.addRow()添加数据行。

导出Excel文件：使用workbook.xlsx.writeBuffer()生成Excel文件的缓冲区，然后创建一个Blob对象，并使用window.URL.createObjectURL(blob)生成下载链接。

三、手动创建Excel文件

除了使用现成的JavaScript库，你也可以手动创建Excel文件。尽管这种方法可能较为繁琐，但可以更灵活地控制文件的生成过程。

1、创建CSV文件

CSV（Comma-Separated Values）是一种简单的文本格式，可以用来表示表格数据。你可以使用JavaScript生成CSV文件，然后导出为Excel文件。

HTML代码：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Export CSV</title>


</head>


<body>


    <button id="export-button">Export to CSV</button>


    <script src="script.js"></script>


</body>


</html>

JavaScript代码（script.js）：

document.getElementById('export-button').addEventListener('click', function() {


    // 创建一些数据


    const data = [


        ["Name", "Age", "Email"],


        ["John Doe", 28, "john.doe@example.com"],


        ["Jane Doe", 32, "jane.doe@example.com"]


    ];


    // 将数据转换为CSV格式


    const csvContent = data.map(e => e.join(",")).join("n");


    // 创建一个Blob对象


    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });


    const url = window.URL.createObjectURL(blob);


    const a = document.createElement('a');


    a.href = url;


    a.download = 'data.csv';


    a.click();


    window.URL.revokeObjectURL(url);


});

2、详细说明

创建数据：使用一个数组来定义数据。每个子数组代表一行数据。

转换为CSV格式：使用array.map()和array.join()方法将数据转换为CSV格式。

创建Blob对象并导出：使用new Blob()创建一个Blob对象，并使用window.URL.createObjectURL(blob)生成下载链接。

四、使用服务器端工具

如果你需要处理大量数据或者需要更复杂的Excel操作，可以考虑使用服务器端工具生成Excel文件，然后通过前端下载。

1、使用Node.js和ExcelJS

在Node.js环境中，可以使用ExcelJS库生成Excel文件，然后通过HTTP响应传输给客户端。

Node.js代码（server.js）：

const express = require('express');


const ExcelJS = require('exceljs');


const app = express();


const port = 3000;


app.get('/export', async (req, res) => {


    const workbook = new ExcelJS.Workbook();


    const worksheet = workbook.addWorksheet('Sheet1');


    worksheet.columns = [


        { header: 'Name', key: 'name', width: 20 },


        { header: 'Age', key: 'age', width: 10 },


        { header: 'Email', key: 'email', width: 30 }


    ];


    worksheet.addRow({ name: 'John Doe', age: 28, email: 'john.doe@example.com' });


    worksheet.addRow({ name: 'Jane Doe', age: 32, email: 'jane.doe@example.com' });


    res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');


    res.setHeader('Content-Disposition', 'attachment; filename=data.xlsx');


    await workbook.xlsx.write(res);


    res.end();


});


app.listen(port, () => {


    console.log(`Server is running at http://localhost:${port}`);


});

前端代码（index.html）：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Export Excel</title>


</head>


<body>


    <button id="export-button">Export to Excel</button>


    <script>


        document.getElementById('export-button').addEventListener('click', function() {


            window.location.href = '/export';


        });


    </script>


</body>


</html>

2、详细说明

创建Node.js服务器：使用Express.js创建一个简单的HTTP服务器。

生成Excel文件：使用ExcelJS库生成Excel文件。

设置响应头：设置Content-Type和Content-Disposition响应头，以确保浏览器正确处理文件下载。

发送Excel文件：使用workbook.xlsx.write(res)将Excel文件写入HTTP响应。

通过以上几种方法，你可以在不同的场景中选择最适合的方式来导出Excel表格数据。无论是前端直接导出还是通过服务器端生成，JavaScript都提供了强大的工具和库来实现这一需求。

相关问答FAQs：

1. 如何使用JavaScript导出Excel表格数据？
JavaScript可以通过使用第三方库或者自定义代码来导出Excel表格数据。常见的方法是使用xlsx或exceljs等库来生成Excel文件并下载。你可以通过调用库的API来创建工作簿、工作表，添加数据，并最终导出Excel文件。

2. 我该如何安装和使用xlsx库来导出Excel表格数据？
要使用xlsx库，首先你需要在你的项目中安装它。你可以使用npm命令进行安装：npm install xlsx。安装完成后，你可以通过导入库的方式在你的JavaScript文件中使用它。

下面是一个简单的示例代码，展示如何使用xlsx库导出Excel表格数据：

const XLSX = require('xlsx');

// 创建工作簿
const workbook = XLSX.utils.book_new();

// 创建工作表
const worksheet = XLSX.utils.json_to_sheet(yourData);

// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 导出Excel文件
XLSX.writeFile(workbook, 'yourFileName.xlsx');

3. 有没有其他方法可以使用JavaScript导出Excel表格数据？
除了使用xlsx库外，还有其他一些方法可以导出Excel表格数据。你可以使用Blob对象、FileSaver库或者自定义代码来实现。其中，Blob对象可以将数据转换为二进制数据，FileSaver库可以将Blob对象保存为文件并下载。自定义代码可以利用浏览器的原生API来生成Excel文件。无论你选择哪种方法，都需要了解Excel文件的格式和结构，以便正确导出数据。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3779580

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部