react-antd表格导出为Excel

10 篇文章 0 订阅
5 篇文章 0 订阅
这篇博客介绍了如何在React应用中结合Ant Design表格和js-export-excel插件来实现Excel文件的导出。首先,通过yarn或npm安装js-export-excel插件。然后,在页面中导入并设置导出按钮的点击事件。在事件处理函数中,构造所需的数据格式,并调用插件的方法生成Excel文件并保存。整个过程详细展示了从数据处理到导出的完整步骤。
摘要由CSDN通过智能技术生成

安装插件js-export-excel

yarn安装-记得以管理员身份执行
yarn add js-export-excel
 
npm安装
npm install js-export-excel

页面导入

页面导入

import CreateExcel from 'js-export-excel';

按钮

<Button style={{margin:'0 0 0 25px'}} onClick={this.download}>导出Excel表格</Button>

调用

download = () => {
        let data=this.state.data;
        let option={};
        let dataTable=[];
        option.fileName = '报销人员';  //excel文件名称

        data.map(v=>{
            dataTable.push({
                '姓名': v.name,
                '密码': v.password,
                '部门': v.department,
                '身份证': v.idcard,
                '社保卡': v.sscard,
                '银行卡': v.bankcard,
            })
        });
        option.datas=[
            {
                sheetData:dataTable,
                sheetName:'sheet',
                sheetFilter: ["姓名", "密码", "部门", "身份证", "社保卡", "银行卡"],
                sheetHeader: ["姓名", "密码", "部门", "身份证", "社保卡", "银行卡"],
            }
        ];
        let toExcel = new CreateExcel(option);
        toExcel.saveExcel()
    };
    

结果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-antd-treetable是一个基于React和Ant Design框架开发的树形表格组件。该组件提供了一个功能强大且易用的界面,用于展示具有树形结构的数据。 react-antd-treetable组件主要特点如下: 1. 树形结构:组件支持展示具有树形结构的数据,每个节点可以包含子节点,形成层叠的树状布局。 2. 数据排序:可通过点击表头进行排序操作,对树形表格中的数据进行升序或降序排序。 3. 行选择:可以通过点击表格的行来选择或取消选择特定的行数据。同时,也支持通过选择父节点实现对整个子节点的选中或取消选中。 4. 编辑功能:支持在表格中对特定单元格的数据进行编辑,提供了输入框等组件供用户进行修改。 5. 展开/收起:可以通过点击加号和减号来展开或收起树形表格中的子节点,以便更清晰地查看和管理数据。 6. 异步加载:支持异步加载数据,可以根据需要动态加载子节点数据,提高了性能和效率。 7. 数据过滤:组件提供了一个搜索框,可以根据用户输入的关键字来过滤和筛选需要展示的数据,方便用户快速找到所需数据。 总的来说,react-antd-treetable是一个功能丰富且易于使用的树形表格组件,适用于需要展示树形数据结构的项目。无论是对于数据展示、编辑、排序、选择还是过滤等功能,该组件都提供了完善的解决方案,方便开发者快速构建出符合需求的树形表格界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值