ReactJS中将ReactHTMLTableToExcel导出文件从xls改为xlsx

问题根源 #

• 直接修改原库文件名后缀、MIME类型无法得到可用xlsx文件的核心原因：ReactHTMLTableToExcel的实现逻辑是拼接带Office兼容标记的HTML文本，本质导出的是HTML格式文件，只是伪装成.xls让Excel识别打开。而.xlsx是基于OOXML标准的压缩二进制格式，和HTML结构完全不兼容，硬改后缀只会得到损坏的文件，打开时会报格式不匹配错误。

推荐方案：替换为SheetJS(xlsx)实现原生xlsx导出 #

这是目前兼容性最好、实现成本最低的方案，完全可以覆盖原库的所有能力，同时支持自定义列过滤、样式保留、多工作表等扩展需求。

• 第一步：安装依赖

npm install xlsx

• 第二步：封装通用导出方法

import * as XLSX from 'xlsx';

/**
 * 页面表格导出为xlsx文件
 * @param {string} tableId 要导出的表格DOM ID
 * @param {string} filename 导出文件名，不需要带后缀
 * @param {string} sheetName 工作表名称
 */
const exportToXlsx = (tableId, filename = '导出数据', sheetName = 'Sheet1') => {
  const tableElement = document.getElementById(tableId);
  if (!tableElement || tableElement.nodeName !== 'TABLE') {
    console.error('传入的ID对应元素不是有效HTML表格');
    return false;
  }

  // 可在此处插入自定义逻辑：比如隐藏不需要导出的列，和你之前做的移除导出列逻辑完全兼容
  // 示例：隐藏第二列
  // tableElement.querySelectorAll('td:nth-child(2),th:nth-child(2)').forEach(el => el.style.display = 'none')

  // 从表格DOM生成Excel工作簿对象
  const workbook = XLSX.utils.table_to_book(tableElement, {
    sheet: sheetName,
    raw: true // 可选：避免数字、日期格式被自动转换
  });

  // 导出为xlsx文件
  XLSX.writeFile(workbook, `${filename}.xlsx`);
  return true;
}

• 第三步：组件中使用

function DataTable() {
  return (
    <div>
      <table id="data-table">
        <thead>
          <tr>
            <th>订单编号</th>
            <th>下单时间</th>
            <th>订单金额</th>
            {/* 不需要导出的列可以在导出方法里临时隐藏 */}
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>10001</td>
            <td>2024-05-01</td>
            <td>99</td>
            <td><button>查看</button></td>
          </tr>
        </tbody>
      </table>
      <button onClick={() => exportToXlsx('data-table', '2024年5月订单数据', '订单明细')}>
        导出Excel
      </button>
    </div>
  )
}

不推荐方案：魔改原有ReactHTMLTableToExcel组件 #

如果你因为项目约束必须保留原组件的使用方式，可以直接把原组件源码复制到本地，将原handleDownload方法中拼接HTML、生成base64下载链接的逻辑替换为上述xlsx生成逻辑，保留原组件的props定义即可。但这种方式和直接使用xlsx库没有本质区别，后续维护成本更高，没有特殊需求不建议采用。

避坑提示：不要尝试仅修改原代码中filename的后缀为.xlsx、替换MIME类型为application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，这种方式导出的文件本质还是HTML结构，Excel打开时会弹出格式损坏警告，部分版本的Office甚至会直接拦截文件无法打开。

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