antd Table表格导出excel

antd 表格导出excel

安装插件react-html-table-to-excel

npm install --save react-html-table-to-excel

引入依赖

import ReactHTMLTableToExcel from 'react-html-table-to-excel'

例子中写的是

<ReactHTMLTableToExcel
  id="test-table-xls-button"
  className="download-table-xls-button"
  table="table-to-xls"
  filename="tablexls"
  sheet="tablexls"
  buttonText="Download as XLS"/>
<table id="table-to-xls">
</table>

但是antd的Table中的table元素被<div>包裹

所以要先找到table元素再附上id属性

componentDidMount(){
    const tableCon = ReactDOM.findDOMNode(this.refs['table'])
    const table = tableCon.querySelector('table')
    table.setAttribute('id','table-to-xls')
}

<Table
  ref='table'
></Table>