HTML JavaScript – 将HTML表格数据导出为Excel

admin
行业动态
2024-04-15
5007

要将HTML表格数据导出为Excel，可以使用以下方法：

HTML JavaScript – 将HTML表格数据导出为Excel 第1张

1、创建一个HTML文件，包含一个表格和一个按钮，点击按钮时，将触发导出功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>导出表格为Excel</title>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>28</td>
                <td>深圳</td>
            </tr>
        </tbody>
    </table>
    <button onclick="exportToExcel()">导出为Excel</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

2、接下来，创建一个名为main.js的JavaScript文件，用于处理导出功能，在这个文件中，我们将使用xlsx库来创建一个新的工作簿，并将表格数据写入工作表，我们将使用FileSaver.js库来保存工作簿为Excel文件。

确保在HTML文件中引入xlsx.full.min.js和FileSaver.js库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

在main.js文件中编写以下代码：

function exportToExcel() {
    // 获取表格数据
    const table = document.getElementById("myTable");
    const rows = table.getElementsByTagName("tr");
    let data = [];
    for (let i = 1; i < rows.length; i++) {
        const cells = rows[i].getElementsByTagName("td");
        let rowData = [];
        for (let j = 0; j < cells.length; j++) {
            rowData.push(cells[j].innerText);
        }
        data.push(rowData);
    }
    // 创建新的工作簿
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(data);
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
    // 将工作簿转换为二进制字符串
    const wbout = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    // 使用FileSaver.js保存工作簿为Excel文件
    saveAs(new Blob([s2ab(wbout)], { type: "application/octetstream" }), "导出的数据.xlsx")；
}
function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
}

现在，当用户点击“导出为Excel”按钮时，表格数据将被导出为名为“导出的数据.xlsx”的Excel文件。