react+antd使用react-html-table-to-excel实现导出功能

react+antd使用react-html-table-to-excel实现导出功能

npm下载依赖包

基于react 和react-dom
npm install react-html-table-to-excel --save

使用

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import ReactHTMLTableToExcel from 'react-html-table-to-excel';

class Table extends PureComponent {

constructor(props) {
super(props);
}
this.state = {
ref:this.props.attr  // 从父组件获取参数判断该table是否需要导出
}
componentDidMount() {
if (this.state.ref == 'table') {
const tableCon = ReactDOM.findDOMNode(this.refs['table']); // 通过ref属性找到该table
const table = tableCon.querySelector('table');  //获取table
table.setAttribute('id','table-to-xls')     //给该table设置属性
}
}

render() {
const { attr } = this.props;

return (
<div>
<ReactHTMLTableToExcel
id="test-table-xls-button"
className="download-table-xls-button"
table="table-to-xls"
filename="文件名称"
sheet="工作表名称"
buttonText="导出按钮名称"/>
// 下为antd table组件
<Table
...省略其他属性配置
ref={attr || ''}
/>

</div>
);
}
}

export default Table