react Ant Design ProUI框架导出Excel(只能导出当前列表数据)

友情链接: http://www.sucaishouji.cn/

插件安装
npm install js-export-excel
安装完成之后开始引入
import ExportJsonExcel from "js-export-excel"
使用
<Button onClick={this.exportExcel}>导出</Button>

调用

   handleExport = () => {
const { ReqDetailList } = this.props; // 网络请求命名空间
const{columns} = this.state; // 需要放在state里边,Table,Columns
const option = {}; option.fileName = 'excel';
option.datas = [
{
sheetData: ReqDetailList.data.map(item => {
const result = {};
columns.forEach(c => {
result[c.dataIndex] = item[c.dataIndex];
});
return result;
}),
sheetName: 'ExcelName', // Excel文件名称
sheetFilter: columns.map(item => item.dataIndex),
sheetHeader: columns.map(item => item.title),
columnWidths: columns.map(() => 10),
},
];
const toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
};

Ant Design Pro实现导出Excel的更多相关文章

  1. Ant Design Pro (中后台系统)教程

    一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么:  https://www.cnblogs ...

  2. ant design pro 当中改变ant design 组件的样式和 数据管理

    ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...

  3. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  4. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  5. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

  6. ant design pro (十四)advanced 使用 CLI 工具

    一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提 ...

  7. ant design pro (十三)advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

  8. ant design pro (十二)advanced UI 测试

    一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...

  9. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

随机推荐

  1. 作业——12 hadoop大作业

    作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3339 Hadoop综合大作业 1.以下是爬虫大作业产生的csv文件 ...

  2. 推荐一款不错的MarkDown在线编辑器

    StackEdit链接:https://stackedit.io/editor StackEdit可以实现同步编辑预览,如下图展示: 菜单界面 功能包括: 管理多个 MarkDown 文档.可在线或离 ...

  3. MySQL事务部分回滚-回滚到指定保存点

    我们可以在mysql事务处理过程中定义保存点(SAVEPOINT),然后回滚到指定的保存点前的状态. 定义保存点,以及回滚到指定保存点前状态的语法如下. 定义保存点---SAVEPOINT 保存点名; ...

  4. 秒杀功能压测 jmeter----------windows系统运行jmeter遇到的坑

    最近做了一个安全传输模块,因为怕对性能有较大影响,因此测试安排了针对性的压测 压测的过程出现了一点小问题 发现失败率特别高,测试怀疑是服务端出了错,但是我查看日志发现没有报错.后面我观察TCP链接数排 ...

  5. eclipse没有server选项怎么解决

    eclipse没有server选项怎么解决 步骤: 1,在eclipse菜单“Help”中选择“InstallNew Software”如下图所示. 2,然后在Work with中点击Add,如下图所 ...

  6. android -------- GifImageView 之gif图片加载

    目前支持Gif播放的开源库还是有的,试了一下还是这种好用点,所以来分享下android-gif-drawable是通过JNI来渲染帧的,这种方式比使用WebView或者Movie效率要高 要求Andr ...

  7. 如何查看window 7/window 8 等系统 的激活状态?

    http://www.officezhushou.com/office-key/   Office激活密钥 Win+R 输入: slmgr.vbs -dlv 显示:最为详尽的激活信息,包括:激活ID. ...

  8. Could not get JDBC Connection; nested exception is java.sql.SQLException: ${jdbc.driver}

    在一个SSM分布式项目中一个服务报错: ### Error querying database. Cause: org.springframework.jdbc.CannotGetJdbcConnec ...

  9. 【Java】Spring之面向方面编程(AOP)(五)

    面向方面编程(AOP)通过提供另一种思考程序结构的方式来补充面向对象编程(OOP).OOP中模块化的关键单元是类,而在AOP中,模块化单元是方面.方面实现了跨越多种类型和对象的关注点(例如事务管理)的 ...

  10. LODOP和C-LODOP注册与角色等简短问答【增强版】

    之前的简短问答:Lodop.c-lodop注册与角色简短问答.Lodop简短问答客户反馈篇 及排查步骤 及注册相关本文重新整理相关简短问答,调整问答顺序,增加相关的问答. 其他相关(非简短问答):LO ...