如何删除或隐藏SheetJS从HTML表格生成的.xlsx最后4列？

问题分析 #

你当前的代码存在几个关键问题：

• 尝试删除列的循环仅将单元格数据存入数组，并未实际修改工作表内容
• 设置!cols时，你先清空数组再push大量宽度配置，但后续隐藏列的代码被注释，且列索引对应错误（你的表格只有18列，索引0-17，最后4列是14-17）
• 直接使用table_to_sheet会完整导入所有列，未做筛选

方案一：转换表格时直接筛选列（推荐） #

这种方法在转换前就只提取需要的14列，避免后续修改工作表的麻烦：

name = 'ExcelEscenariosOptimizacion.xlsx';
exportToExcel(): void {
  const tableElement = document.getElementById('tabla-escenarios-optimizacion');
  if (!tableElement) return;

  // 将HTML表格转换为二维数组，仅保留前14列
  const rows = Array.from(tableElement.querySelectorAll('tr'));
  const filteredData = rows.map(row => {
    const cells = Array.from(row.querySelectorAll('td, th'));
    // 只取前14个单元格的文本内容
    return cells.slice(0, 14).map(cell => cell.textContent?.trim() || '');
  });

  // 从筛选后的数组创建工作表
  const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(filteredData);

  // 设置列宽（仅需配置14列）
  worksheet['!cols'] = [
    { width: 15 }, { width: 25 }, { width: 20 }, { width: 20 },
    { width: 25 }, { width: 15 }, { width: 20 }, { width: 25 },
    { width: 15 }, { width: 20 }, { width: 35 }, { width: 35 },
    { width: 35 }, { width: 30 }
  ];

  const book: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(book, worksheet, 'Sheet1');
  XLSX.writeFile(book, this.name);
}

方案二：转换后删除不需要的列 #

如果必须先完整转换表格再删除列，可以通过遍历工作表单元格并移除目标列，同时更新工作表的引用范围：

name = 'ExcelEscenariosOptimizacion.xlsx';
exportToExcel(): void {
  const tableElement = document.getElementById('tabla-escenarios-optimizacion');
  if (!tableElement) return;

  const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(tableElement);

  // 删除最后4列（列索引14-17）
  const colsToDelete = [14,15,16,17];
  // 遍历所有单元格，删除目标列的单元格
  Object.keys(worksheet).forEach(cellKey => {
    const cellAddr = XLSX.utils.decode_cell(cellKey);
    if (colsToDelete.includes(cellAddr.c)) {
      delete worksheet[cellKey];
    }
  });

  // 更新工作表的引用范围，仅保留前14列
  const originalRef = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
  originalRef.e.c = 13; // 前14列的结束索引是13（从0开始）
  worksheet['!ref'] = XLSX.utils.encode_range(originalRef);

  // 设置列宽（仅配置14列）
  worksheet['!cols'] = [
    { width: 15 }, { width: 25 }, { width: 20 }, { width: 20 },
    { width: 25 }, { width: 15 }, { width: 20 }, { width: 25 },
    { width: 15 }, { width: 20 }, { width: 35 }, { width: 35 },
    { width: 35 }, { width: 30 }
  ];

  const book: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(book, worksheet, 'Sheet1');
  XLSX.writeFile(book, this.name);
}

方案三：隐藏列的正确方法（如果不需要删除仅隐藏） #

如果你只是想隐藏最后4列而非删除，需要确保!cols数组覆盖所有18列，并为最后4列设置hidden: true：

name = 'ExcelEscenariosOptimizacion.xlsx';
exportToExcel(): void {
  const tableElement = document.getElementById('tabla-escenarios-optimizacion');
  if (!tableElement) return;

  const worksheet: XLSX.WorkSheet = XLSX.utils.table_to_sheet(tableElement);

  // 配置18列的属性，前14列设置宽度，后4列隐藏
  worksheet['!cols'] = [
    { width: 15 }, { width: 25 }, { width: 20 }, { width: 20 },
    { width: 25 }, { width: 15 }, { width: 20 }, { width: 25 },
    { width: 15 }, { width: 20 }, { width: 35 }, { width: 35 },
    { width: 35 }, { width: 30 },
    { hidden: true }, { hidden: true }, { hidden: true }, { hidden: true }
  ];

  const book: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(book, worksheet, 'Sheet1');
  XLSX.writeFile(book, this.name);
}

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