如何将HTML表格中勾选的行导出至Excel文件？

嘿，这个需求我之前也帮朋友实现过，纯前端就能搞定，不用麻烦后端！下面给你两种方案，一种是原生JS生成CSV（Excel直接能打开），另一种是用轻量库生成标准XLSX文件，你可以根据需求选：

先明确你的表格结构（方便对应代码） #

假设你的HTML表格大概是这样的（如果结构不一样，只需要调整选择器就行）：

<table id="dataTable">
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="rowCheckbox"></td>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>
<button id="exportBtn">导出勾选行到Excel</button>

方案1：原生JS生成CSV格式（简单无依赖） #

CSV是Excel完全支持的文本格式，实现起来零依赖，代码也简洁：

document.getElementById('exportBtn').addEventListener('click', function() {
  // 第一步：筛选出所有被勾选的行
  const table = document.getElementById('dataTable');
  const checkedRows = Array.from(table.querySelectorAll('tbody tr')).filter(row => {
    const checkbox = row.querySelector('.rowCheckbox');
    return checkbox && checkbox.checked;
  });

  // 处理没勾选任何行的情况
  if (checkedRows.length === 0) {
    alert('先勾选至少一行数据再导出哦！');
    return;
  }

  // 第二步：提取表头（跳过checkbox列）
  const headers = Array.from(table.querySelectorAll('thead th'))
    .filter(th => !th.querySelector('input[type="checkbox"]'))
    .map(th => `"${th.textContent.trim()}"`)
    .join(',');

  // 第三步：提取勾选行的数据（同样跳过checkbox列）
  const rowsData = checkedRows.map(row => {
    return Array.from(row.querySelectorAll('td'))
      .slice(1) // 跳过第一列的checkbox
      .map(td => `"${td.textContent.trim()}"`)
      .join(',');
  });

  // 第四步：拼接成CSV内容并创建下载链接
  const csvContent = `${headers}\n${rowsData.join('\n')}`;
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  
  link.href = url;
  link.download = `勾选数据_${new Date().toISOString().slice(0,10)}.csv`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

方案2：用SheetJS生成标准XLSX文件（更专业） #

如果需要生成真正的XLSX格式（不是CSV），或者你的表格有合并单元格、复杂样式，推荐用SheetJS（xlsx.js）这个轻量库，功能更强：

1. 先引入库（用CDN就行）：

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

2. 导出逻辑代码：

document.getElementById('exportBtn').addEventListener('click', function() {
  const table = document.getElementById('dataTable');
  const checkedRows = Array.from(table.querySelectorAll('tbody tr')).filter(row => {
    const checkbox = row.querySelector('.rowCheckbox');
    return checkbox && checkbox.checked;
  });

  if (checkedRows.length === 0) {
    alert('先勾选至少一行数据再导出哦！');
    return;
  }

  // 构建一个只包含表头和勾选行的新表格
  const exportTable = document.createElement('table');
  exportTable.appendChild(table.querySelector('thead').cloneNode(true));
  const tbody = document.createElement('tbody');
  checkedRows.forEach(row => tbody.appendChild(row.cloneNode(true)));
  exportTable.appendChild(tbody);

  // 移除所有checkbox列（表头和行里的）
  Array.from(exportTable.querySelectorAll('th:first-child, td:first-child')).forEach(cell => cell.remove());

  // 用SheetJS生成XLSX文件并下载
  const workbook = XLSX.utils.table_to_book(exportTable, { sheet: "勾选数据" });
  XLSX.writeFile(workbook, `勾选数据_${new Date().toISOString().slice(0,10)}.xlsx`);
});

小提示 #

• 两种方案都处理了“无勾选行”的提示，避免用户点了没反应
• 文件名里加了日期，方便区分不同时间的导出文件
• 如果你的表格列顺序不一样，只需要调整slice(1)或者筛选条件就行

这样操作后，你勾选第1、2、5行，点击导出就能得到只包含这三行数据的Excel文件啦！

内容的提问来源于stack exchange，提问作者GUMMADI VIJAYA KUMAR