年度牛「码」实战案例 | 使用JS将HTML表格导出为CSV

原创

Front_Yue

发布于 2024-10-20 21:41:24

60500

代码可运行

文章被收录于专栏：码艺坊码艺坊

运行总次数：0

代码可运行

使用JavaScript将表格数据转换为CSV文件并下载

在现代Web开发中，处理表格数据并将其导出为CSV文件是一项常见的需求。CSV（Comma-Separated Values）文件是一种简单的文本格式，适用于存储表格数据，并且可以被多种电子表格软件（如Microsoft Excel、Google Sheets等）轻松导入。本文将介绍如何使用JavaScript将HTML表格数据转换为CSV文件并提供下载功能。

准备工作

首先，我们需要一个包含数据的HTML表格。假设我们有以下简单的HTML表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convert Table to CSV</title>
</head>
<body>
    <table id="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>28</td>
                <td>john.doe@example.com</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>32</td>
                <td>jane.smith@example.com</td>
            </tr>
            <tr>
                <td>Alice Johnson</td>
                <td>24</td>
                <td>alice.johnson@example.com</td>
            </tr>
        </tbody>
    </table>
    <button id="download-csv">Download CSV</button>

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

JavaScript代码实现

接下来，我们需要编写JavaScript代码来实现将表格数据转换为CSV文件并提供下载功能。我们将创建一个名为script.js的文件，并在其中编写以下代码：

document.getElementById('download-csv').addEventListener('click', function() {
    const table = document.getElementById('data-table');
    const csvContent = convertTableToCSV(table);
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', 'data.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

function convertTableToCSV(table) {
    const csvRows = [];
    for (let i = 0; i < table.rows.length; i++) {
        const row = table.rows[i];
        const rowData = [];
        for (let j = 0; j < row.cells.length; j++) {
            const cell = row.cells[j];
            let cellData = cell.innerText;
            // Escape double quotes and wrap cell data in double quotes if it contains commas or newlines
            if (cellData.includes(',') || cellData.includes('\n') || cellData.includes('"')) {
                cellData = `"${cellData.replace(/"/g, '""')}"`;
            }
            rowData.push(cellData);
        }
        csvRows.push(rowData.join(','));
    }
    return csvRows.join('\n');
}

代码解释

事件监听器：
- 我们为“Download CSV”按钮添加了一个点击事件监听器。
- 当按钮被点击时，调用convertTableToCSV函数将表格数据转换为CSV格式。
- 创建一个Blob对象来存储CSV内容，并使用URL.createObjectURL生成一个URL。
- 创建一个隐藏的<a>元素，设置其href属性为生成的URL，并设置download属性为文件名data.csv。
- 触发点击事件下载文件，然后移除<a>元素。
convertTableToCSV函数：
- 遍历表格的所有行和单元格，提取每个单元格的内容。
- 如果单元格内容包含逗号、换行符或双引号，则对其进行转义处理。
- 将每行的单元格内容用逗号连接成CSV格式的一行，并将所有行用换行符连接成完整的CSV内容。