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

你可能感兴趣的:(react,前端导出,antd)