react-antd表格导出为Excel

最新推荐文章于 2024-07-22 16:06:14 发布

废八

最新推荐文章于 2024-07-22 16:06:14 发布

阅读量1.5k

点赞数 2

分类专栏：前端 antd react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_42571665/article/details/121957193

版权

前端同时被 3 个专栏收录

11 篇文章 1 订阅

订阅专栏

react

10 篇文章 0 订阅

订阅专栏

antd

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()
    };