js怎么导出excel表格

在JavaScript中导出Excel表格，通常有以下几种方法：

1. 使用SheetJS（xlsx）库

基础概念： SheetJS是一个功能强大的JavaScript库，可以读取和写入各种电子表格文件格式，包括Excel。

优势：

支持复杂的Excel操作，如合并单元格、设置单元格样式等。
能够处理大量数据。
跨平台兼容性好。

应用场景：

数据导出、导入。
在线表格编辑器。
数据报告生成。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Export Excel with SheetJS</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
</head>
<body>
    <button onclick="exportTableToExcel('myTable', 'myExcelFile')">Export to Excel</button>
    <table id="myTable" border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <!-- 更多行 -->
    </table>

    <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>
</body>
</html>

2. 使用CSV格式

基础概念： CSV（Comma-Separated Values）是一种简单的文件格式，用于存储表格数据，如数字和文本，其中每行数据由逗号分隔。

优势：

简单易用，兼容性好。
文件体积小，适合大数据量导出。

应用场景：

简单的数据导出。
与各种电子表格软件兼容。

示例代码：

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");
    
    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);
        
        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename);
}

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;
  
    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});
  
    // Download link
    downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
  
    if(navigator.msSaveOrOpenBlob){
        navigator.msSaveOrOpenBlob(csvFile, filename);
    } else {
        var url = window.URL.createObjectURL(csvFile);
        downloadLink.href = url;
        downloadLink.download = filename;
        downloadLink.click();
    }

    // Clean up
    window.URL.revokeObjectURL(url);
    document.body.removeChild(downloadLink);
}

// 使用方法
document.getElementById("exportCSV").addEventListener("click", function(){
    exportTableToCSV("my_csv_file.csv");
});

3. 使用第三方API

基础概念：一些第三方服务提供了API接口，可以直接通过HTTP请求生成并下载Excel文件。

优势：

简单易用，无需处理复杂的文件格式。
可以处理更高级的功能，如模板填充、数据加密等。

应用场景：

需要快速集成导出功能的项目。
需要高级功能的场景。

示例代码（假设使用某个第三方API）：

fetch('https://api.example.com/export', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        data: [
            ["Name", "Age", "City"],
            ["John Doe", 30, "New York"]
            // 更多数据
        ]
    })
})
.then(response => response.blob())
.then(blob => {
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = 'data.xlsx';
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
})
.catch(error => console.error('Error:', error));