嘿，刚好我之前处理过类似的需求，给你分享几个实用的前端实现方案，不管你是纯原生JS还是用React/Vue这类框架，都能轻松搞定！

核心思路 #

不管表头怎么动态变化，我们只需要把表头文本和对应的数据行整理成「数组的数组（AOA）」格式，再用成熟的Excel处理库（比如SheetJS/xlsx）生成文件就行——这个库对动态结构的支持特别友好，完全适配你的场景。

方案1：纯原生JS（直接操作DOM） #

如果你的表格已经渲染在页面上，可以直接从DOM里提取表头和数据：

步骤1：引入SheetJS库 #

用CDN直接引入就行，不用额外安装：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

步骤2：编写导出函数 #

假设你的表格ID是dynamic-attendance-table，对应你说的「course/section」表格：

function exportAttendanceToExcel() {
  // 1. 提取所有表头文本
  const table = document.getElementById('dynamic-attendance-table');
  const headerElements = table.querySelectorAll('thead th');
  const headers = Array.from(headerElements).map(th => th.textContent.trim());

  // 2. 提取每一行的表格数据
  const rowElements = table.querySelectorAll('tbody tr');
  const dataRows = Array.from(rowElements).map(row => {
    const cellElements = row.querySelectorAll('td');
    return Array.from(cellElements).map(td => td.textContent.trim());
  });

  // 3. 构造Excel工作簿和工作表
  const worksheet = XLSX.utils.aoa_to_sheet([headers, ...dataRows]);
  const workbook = XLSX.utils.book_new();
  // 给工作表命名为你的表格标题
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Course/Section');

  // 4. 导出文件到本地
  XLSX.writeFile(workbook, 'attendance-report.xlsx');
}

步骤3：添加导出按钮 #

在页面上加个按钮触发导出：

<button onclick="exportAttendanceToExcel()">导出考勤表到Excel</button>

方案2：React框架下的实现（基于状态数据） #

如果是React项目，不用操作DOM，直接用组件里的headers和data状态来处理更优雅：

步骤1：安装SheetJS #

npm install xlsx

步骤2：组件代码示例 #

import XLSX from 'xlsx';

function AttendanceTable() {
  // 假设这是你的动态表头和数据（实际可从接口或父组件传入）
  const headers = [
    'student id', 
    'student name', 
    'program', 
    'term', 
    'dynamic date 1', 
    '对应日期1的缺席原因备注',
    'dynamic date 2', 
    '对应日期2的缺席原因备注'
  ];

  const data = [
    ['20122222', 'pinky webb', 'computer science', '2024 Spring', '2024-03-01', '病假', '2024-03-05', '事假'],
    // 更多学生数据...
  ];

  const handleExport = () => {
    // 直接用状态里的表头和数据构造工作表
    const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data]);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Course/Section');
    XLSX.writeFile(workbook, 'attendance-report.xlsx');
  };

  return (
    <div>
      <button onClick={handleExport} style={{marginBottom: '1rem'}}>导出Excel</button>
      <table border="1">
        <thead>
          <tr>
            {headers.map((header, idx) => (
              <th key={idx}>{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, rowIdx) => (
            <tr key={rowIdx}>
              {row.map((cell, cellIdx) => (
                <td key={cellIdx}>{cell}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default AttendanceTable;

小细节提醒 #

• 如果你的student id是带前导零的字符串（比如00123456），直接导出可能会被Excel识别为数字丢失前导零。这时候可以把数据改成对象格式，指定为文本类型：

  // 把ID单元格改成：
  { t: 's', v: '00123456' }
  

• 如果需要更复杂的样式（比如表头加粗、单元格背景色），可以用SheetJS的cellStyles配置，不过基础导出用上面的代码完全足够。

内容的提问来源于stack exchange，提问作者november november