一、安装依赖
yarn add react-html-table-to-excel
二、导出控件
constructor(props) {
super(props);
this.tableRef = React.createRef();
}
componentDidMount() {
const table = this.tableRef.current.querySelector('table');
table.setAttribute('id', 'table-to-xls');
}
render() {
return(
<ReactHTMLTableToExcel
id="test-table-xls-button"
className="download-table-xls-button"
table="table-to-xls"
filename="tablexls"
sheet="tablexls"
buttonText="Download as XLS"
/>
<Table
columns={columns}
dataSource={dataSource}
ref={ref => {
this.table = ref;
}}
/>
)
}
三、全量导出
ant design 默认table 每页显示10条，上述导出只会导出当前页的内容；可以增大每页显示条数，但不能设置scroll的y属性，否则数据无法导出。
