js将表格导出到excel表格

要将JavaScript中的表格导出到Excel表格，可以使用以下基础概念和方法：

基础概念

Blob对象：用于表示不可变的原始数据，可以用来创建文件。
URL.createObjectURL()：生成一个指向Blob对象的URL。
a标签的download属性：用于指定下载文件的名称。

类型

CSV格式：简单文本格式，易于处理和解析。
Excel格式（.xlsx）：更复杂的二进制格式，支持更多的功能和样式。

应用场景

数据导出：用户需要将网页上的表格数据保存到本地电脑。
报告生成：自动化生成并下载数据分析报告。

示例代码

以下是一个将HTML表格导出为Excel文件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export Table to Excel</title>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>jane@example.com</td>
        </tr>
    </table>
    <button onclick="exportTableToExcel('myTable', 'my-table-export')">Export to Excel</button>

    <script>
        function exportTableToExcel(tableID, filename = ''){
            var downloadLink;
            var dataType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
            var tableSelect = document.getElementById(tableID);
            var workbook = XLSX.utils.table_to_book(tableSelect, {sheet:"Sheet1"});
            var excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
            var data = new Blob([excelBuffer], {type: dataType});
            var url = window.URL.createObjectURL(data);
            filename = filename?filename+'.xlsx':'excel_data.xlsx';
            downloadLink = document.createElement("a");

            document.body.appendChild(downloadLink);
            
            if(navigator.msSaveOrOpenBlob) {
                navigator.msSaveOrOpenBlob(data, filename);
            } else {
                downloadLink.href = url;
                downloadLink.download = filename;
                downloadLink.click();
            }

            window.URL.revokeObjectURL(url);
            document.body.removeChild(downloadLink);
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</body>
</html>

解释

HTML部分：定义了一个简单的表格和一个按钮。
JavaScript部分：
- exportTableToExcel函数负责导出表格。
- 使用XLSX.utils.table_to_book将HTML表格转换为工作簿对象。
- 使用XLSX.write将工作簿对象转换为Excel文件的二进制数据。
- 创建一个Blob对象并生成一个下载链接。
- 使用a标签的download属性触发文件下载。