JS调用页面表格导出excel示例代码

下面是关于"JS调用页面表格导出excel示例代码"的完整实例教程：

1. 前置知识

在开始本教程之前，需要先了解以下几点：

• JavaScript基础语法和DOM操作；
• 如何使用jQuery等库工具来快速操作DOM；
• 后端语言的基础知识，了解如何向服务器发送POST请求。

2. 实例介绍

本实例所要实现的功能是：在页面中展示一张表格，并提供一个按钮，在用户点击按钮后，将表格数据导出为Excel文件。

3. 实例代码

3.1 HTML代码

首先，我们需要在HTML页面中创建一个表格和一个按钮。具体代码如下：

<table id="dataTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>小明</td>
            <td>18</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小红</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

<button onclick="exportExcel()">导出Excel</button>

以上代码中，我们创建了一个id为dataTable的表格，并在按钮click事件上绑定了一个exportExcel函数。

3.2 JavaScript代码

接下来，我们需要在JavaScript中编写exportExcel函数来实现导出Excel文件的功能。具体代码如下：

function exportExcel() {
    // 获取表格数据
    var tableData = [];
    var rows = document.querySelectorAll("#dataTable tbody tr");
    for (var i = 0; i < rows.length; i++) {
        var cols = rows[i].querySelectorAll("td");
        var rowData = [];
        for (var j = 0; j < cols.length; j++) {
            rowData.push(cols[j].textContent);
        }
        tableData.push(rowData);
    }

    // 发送POST请求
    $.ajax({
        url: "server.php",
        type: "POST",
        data: {
            data: JSON.stringify(tableData)
        },
        success: function(response) {
            // 下载文件
            window.location.href = response;
        }
    });
}

以上代码中，我们首先通过querySelectorAll获取表格中的数据，然后将表格数据存储到一个数组中。接着，我们通过POST请求将数据发送到后端，后端将数据生成Excel文件并返回文件下载链接。最后，我们通过window.location.href下载Excel文件。

3.3 PHP代码

最后，我们需要编写后端PHP代码实现将表格数据生成Excel文件的功能。具体代码如下：

$data = json_decode($_POST["data"]);
$fileName = "data.xls";
$fp = fopen($fileName, "w");

foreach ($data as $rowData) {
    fputcsv($fp, $rowData, "\t");
}

fclose($fp);

header("Content-Disposition: attachment; filename=\"" . $fileName . "\"");
header("Content-Type: application/vnd.ms-excel");

echo $fileName;

以上代码中，我们首先通过json_decode处理POST请求获得的数据，然后将数据写入到一个xls文件中。最后，通过header设置Content-Disposition和Content-Type实现文件下载。

4. 结束语

至此，我们已经完成了JS调用页面表格导出Excel的完整实例教程。本文重点介绍了如何发送POST请求以及如何将表格数据写入到Excel文件中。希望本文能对您有所帮助！