html如何导出一个表格数据

admin
行业动态
2024-04-06
4688

要导出一个表格数据，可以使用HTML的<table>标签创建一个表格，然后使用JavaScript和相关库（如jQuery）将表格数据导出到文件，以下是一个简单的示例：

1、创建一个HTML文件，添加一个表格和一个按钮，用于触发导出操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>导出表格数据</title>
    <script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
    <h1>表格数据</h1>
    <table id="myTable" border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </table>
    <button id="exportBtn">导出表格数据</button>
    <script src="exportTableData.js"></script>
</body>
</html>

2、接下来，创建一个名为exportTableData.js的JavaScript文件，编写导出表格数据的代码：

$(document).ready(function () {
    $("#exportBtn").click(function () {
        var table = document.getElementById("myTable");
        var rows = table.getElementsByTagName("tr");
        var data = [];
        for (var i = 0; i < rows.length; i++) {
            var row = [], cols = rows[i].querySelectorAll("td, th");
            for (var j = 0; j < cols.length; j++) {
                row.push(cols[j].innerText);
            }
            data.push(row);
        }
        var csvContent = "data:text/csv;charset=utf8," + data.map(e => e.join(",")).join("
");
        var encodedUri = encodeURI(csvContent);
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "table_data.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    });
});

这个示例中，我们首先获取表格元素，然后遍历表格的每一行和每一列，将数据存储在一个二维数组中，接着，我们将二维数组转换为CSV格式的字符串，并创建一个隐藏的<a>标签，将其href属性设置为CSV字符串的URL编码，并将其download属性设置为下载文件的名称，我们将<a>标签添加到页面中，触发点击事件以开始下载，然后将其从页面中移除。