Angular中用XLSX table_to_sheet导出选中行至Excel的方法

嗨，我来帮你搞定这个导出需求！咱们分两部分来解答你的问题：

一、table_to_sheet能否实现筛选导出？ #

XLSX.utils.table_to_sheet本身没有内置的筛选参数，它会直接读取传入DOM表格的全部内容。不过我们可以先手动筛选出checked属性为true的行，创建一个临时表格，再传给这个方法，间接实现需求：

exportTableToExcel(TableElement: ElementRef, FileName: string, Extension: string) {
  const table = TableElement.nativeElement;
  // 筛选出所有复选框被选中的行（请根据实际页面调整复选框选择器）
  const selectedRows = Array.from(table.querySelectorAll('tr')).filter(row => {
    const checkbox = row.querySelector('input[type="checkbox"]');
    return checkbox && checkbox.checked;
  });

  // 无选中行时给出提示
  if (selectedRows.length === 0) {
    alert('请选择要导出的行');
    return;
  }

  // 创建临时表格，复制表头和选中行
  const tempTable = document.createElement('table');
  tempTable.appendChild(table.querySelector('thead')!.cloneNode(true));
  const tempTbody = document.createElement('tbody');
  selectedRows.forEach(row => tempTbody.appendChild(row.cloneNode(true)));
  tempTable.appendChild(tempTbody);

  // 用临时表格生成工作表并导出
  const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(tempTable);
  const workbook: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, ws, 'ClassDataExport');
  XLSX.writeFile(workbook, `${FileName}.${Extension}`);

  // 清理临时DOM元素
  tempTable.remove();
}

二、json_to_sheet完全可以实现，且更灵活！ #

相比操作DOM的方式，json_to_sheet从数据层面处理，逻辑更清晰、易维护。核心思路是：提取选中行的数据转换成JSON数组，再生成工作表导出：

exportSelectedRowsToExcel(TableElement: ElementRef, FileName: string, Extension: string) {
  const table = TableElement.nativeElement;
  // 提取表头文本
  const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent?.trim() || '');
  const rows = Array.from(table.querySelectorAll('tbody tr'));

  // 转换选中行为JSON数组
  const selectedData = rows.filter(row => {
    const checkbox = row.querySelector('input[type="checkbox"]');
    return checkbox && checkbox.checked;
  }).map(row => {
    const cells = Array.from(row.querySelectorAll('td'));
    return cells.reduce((obj, cell, index) => {
      obj[headers[index]] = cell.textContent?.trim() || '';
      return obj;
    }, {} as {[key: string]: string});
  });

  if (selectedData.length === 0) {
    alert('请选择要导出的行');
    return;
  }

  // 用JSON数组生成工作表并导出
  const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(selectedData);
  const workbook: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, ws, 'ClassDataExport');
  XLSX.writeFile(workbook, `${FileName}.${Extension}`);
}

小提示： #

如果你的表格数据本来就来自前端的数据源（比如一个数组），直接筛选这个数组再传给json_to_sheet会更高效，不用从DOM中提取数据~

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