react导出excel

npm下载依赖包
基于react 和react-dom
npm install react-html-table-to-excel --save
yarn add react-html-table-to-excel

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

第二种方式
使用
1.安装依赖：npm install xlsx；

2.在项目中引用：import * as XLSX from ‘xlsx’;

3.定义上传input：

4.定义handleExcel方法:

2.对应的css:

表格数据导出
1.安装依赖：npm i xlsx-oc --save
2.在项目中导入：

3.在项目使用：
定义导出button

定义点击方法:

定义的表头和传入的数据