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
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值