javascript 导出数据到Excel(处理table中的元素)

下面是详细讲解“javascript 导出数据到Excel(处理table中的元素)”的完整攻略，过程中将包含两个示例说明。

1. 简介

在 web 开发中，有时需要将 table 数据导出为 Excel 文件。本文将介绍如何使用纯 javascript 处理 table 中的元素，并将 table 数据导出为 Excel 文件。

2. 代码实现

首先，我们需要编写一个 javascript 函数来遍历 table，并将 table 的每一行数据转为 Excel 里的一行数据。以下是示例代码：

function tableToExcel(tableId, fileName) {
    var table = document.getElementById(tableId);
    var rows = table.getElementsByTagName("tr");
    var arrContent = [];

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var cells = row.getElementsByTagName("td");
        var arrRow = [];

        for (var j = 0; j < cells.length; j++) {
            var cell = cells[j];
            arrRow.push(cell.innerHTML);
        }

        arrContent.push(arrRow.join(","));
    }

    var csvContent = "data:text/csv;charset=utf-8," + arrContent.join("\n");
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", fileName + ".csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

该函数接收两个参数：一个 table 的标识符和要导出的文件名。下面是函数实现的详细步骤：

• 首先，获取 table 元素以及所有行和单元格的列表。
• 接着，遍历所有行并创建一个新的数组来保存每一行单元格的数据。
• 在遍历单元格时，将每个单元格的内容推入行数组中。
• 将每行数据作为一段逗号分隔的文本行保存到 arrContent 数组中。
• 将 arrContent 数组转换为逗号分隔的文本字符串 csvContent。
• 将 csvContent 编码为 URI 并将其分配给链接的 href 属性。
• 将文件名分配给链接的 download 属性。
• 将链接添加到文档中、触发点击事件并从文档中删除该链接。

3. 示例

下面是两个示例，演示如何使用该函数将 table 导出为 Excel 文件。

示例 1：导出所有 table

HTML 代码：

<table id="table1">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
<br>
<table id="table2">
    <thead>
        <tr>
            <th>编号</th>
            <th>性别</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>女</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>男</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>
</table>
<br>
<button onclick="tableToExcel('table1','table1')">导出table1</button>
<button onclick="tableToExcel('table2','table2')">导出table2</button>

javascript 代码：

function tableToExcel(tableId, fileName) {
    var table = document.getElementById(tableId);
    var rows = table.getElementsByTagName("tr");
    var arrContent = [];

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        var cells = row.getElementsByTagName("td");
        var arrRow = [];

        for (var j = 0; j < cells.length; j++) {
            var cell = cells[j];
            arrRow.push(cell.innerHTML);
        }

        arrContent.push(arrRow.join(","));
    }

    var csvContent = "data:text/csv;charset=utf-8," + arrContent.join("\n");
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", fileName + ".csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

在这个示例中，我们创建了两个 table，并为每个 table 添加了导出按钮。当用户单击导出按钮时，将调用 tableToExcel 函数并导出对应的 table。

示例 2：导出指定列

HTML 代码：

<table id="table3">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>总分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
            <td>80</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
            <td>90</td>
        </tr>
    </tbody>
</table>
<br>
<button onclick="tableToExcel('table3','table3', [0,2])">导出table3的编号和年龄</button>

javascript 代码：

function tableToExcel(tableId, fileName, cols) {
    var table = document.getElementById(tableId);
    var rows = table.getElementsByTagName("tr");
    var arrContent = [];
    var cells = null;

    for (var i = 0; i < rows.length; i++) {
        var row = rows[i];
        if (i == 0) {
            cells = row.getElementsByTagName("th");
        } else {
            cells = row.getElementsByTagName("td");
        }
        var arrRow = [];

        for (var j = 0; j < cols.length; j++) {
            var colIndex = cols[j];
            var cell = cells[colIndex];
            arrRow.push(cell.innerHTML);
        }

        arrContent.push(arrRow.join(","));
    }

    var csvContent = "data:text/csv;charset=utf-8," + arrContent.join("\n");
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", fileName + ".csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

在这个示例中，我们为 table3 只想导出编号和年龄两列的内容。因此，调用 tableToExcel 函数时，我们传递一个数组 [0,2]，只将第 0 列和第 2 列的值添加到导出文件中。

4. 总结

本文介绍了如何使用 javascript 将 table 中的数据导出到 Excel 文件。我们讲解了实现的过程，并提供了两个示例来帮助你更深入了解该函数的应用。希望本文对你有所帮助！