前端table导出表格excel，react-html-table-to-excel和js-export-excel

方法一：使用 react-html-table-to-excel

 官网：react-html-table-to-excel - npm

缺点：上次更新是 5年前了。这个只能导出.xls这种格式

需要获取到table dom节点，js可以用getElememtById，querySelector获取节点，

react类组件可以用ref获取，我用的是函数时组件测试，所以用的是useRef

 导出效果如下：（.xls在mac的number表格打开是乱的，用windows的excel可以打开）

 

方法二： 使用 js-export-excel

官网：js-export-excel - npm

优点：可以自定义按钮，给按钮加个方法就行了，也不用取获取dom节点

缺点：需要去配置columns列对应表头名称就好了，直接把antd的columns遍历取出dataIndex字段（跟表头和dataSource的字段对应）的值就行了，数据跟antd的dataSource一致

 

导出效果如下：