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