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. Python调用win32 API绘制正弦波

    Python调用win32 API新建窗口与直接创建窗口的流程相同 流程:注册窗口→创建窗口→显示窗口→更新窗口→消息循环 代码: # -*- coding: utf-8 -*- import win ...

  2. Oracle存储过程 函数 计算使用资源

    目录 存储过程与函数 存储过程的优势 存储过程 打印语句 选择语句 函数 计算使用资源 存储过程与函数 存储过程的优势 存储过程 /* 多行注释 */ -- 单行注释 //展示错误信息 show er ...

  3. Service Fabric独立集群搭建

    开篇声明:巨坑,慎入.若实则无奈,建议直接上azure... 1.  开启服务器自动更新,安装最新的补丁. 2.  下载用于 Windows Server 的 Service Fabric 包(htt ...

  4. C# System.Web.Mail.MailMessage 发邮件

    C# System.Web.Mail.MailMessage 发邮件 新建控制台Console项目,然后添加 System.Web引用 代码如下: using System; using System ...

  5. jmeter元件作用及执行顺序

    jmeter是一个开源的性能测试工具,它可以通过鼠标拖拽来随意改变元件之间的顺序以及元件的父子关系,那么随着它们的顺序和所在的域不同,它们在执行的时候,也会有很多不同. jmeter的test pla ...

  6. 000 list与map的foreach使用

    一:list的使用 1.程序 package com.jun.it.java8; import java.util.ArrayList; import java.util.List; public c ...

  7. 微信小程序开发——base64位图片显示问题

    前言: 目前小程序项目需要后端借口提供验证码图片,后端是以base64位返回的,按照H5的做法,前边拼上 data:image/png;base64, 应该就可以了,关键代码如下: H5: <i ...

  8. 关于Objective-C新增的__kindof关键字

    Objective-C随着Xcode 7的升级带来了许多新特性,当然此次更新最最大的就是引入了Objective-C的轻量级泛型,确切地说是Objective-C类的轻量级泛型.除此之外,还有一个小特 ...

  9. 深入学习c++--多线程编程(三)thread的两种死法

    1. 生成了一个线程,需要告诉编译器是否管理 必须告诉编译器是不管理还是管理,否则直接down了 #include <iostream> #include <thread> # ...

  10. 【前端】input输入框只能输入大于等于0的正数

    大于等于0的正数,允许小数 <input type="number" step="1" min="0" onkeyup="t ...