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 (
        
// 下为antd table组件 ); }

}

export default Table

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

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

3.定义上传input:
在这里插入图片描述
4.定义handleExcel方法:
react导出excel_第1张图片
2.对应的css:
react导出excel_第2张图片

表格数据导出
1.安装依赖:npm i xlsx-oc --save
2.在项目中导入:
在这里插入图片描述
3.在项目使用:
定义导出button
在这里插入图片描述
定义点击方法:

react导出excel_第3张图片
定义的表头和传入的数据
react导出excel_第4张图片

你可能感兴趣的:(前段,excel,react)