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. ICEM-简单拉伸

    原视频下载地址:https://pan.baidu.com/s/1bpjAOv9 ;密码: rnkd

  2. 【算法编程 C++ python】单链表反序输出

    题目描述 输入一个链表,从尾到头打印链表每个节点的值.   以下方法仅仅实现了功能,未必最佳.在牛客网测试, C++:3ms 480k Python:23ms 5732k /** * struct L ...

  3. hdu1501 Zipper[简单DP]

    目录 题目地址 题干 代码和解释 参考 题目地址 hdu1501 题干 代码和解释 最优子结构分析:设这三个字符串分别为a.b.c,如果a.b可以组成c,那么c的最后一个字母必定来自a或者b的最后一个 ...

  4. curl抓取页面时遇到重定向的解决方法

    用php的curl抓取网页遇到了问题,为阐述方便,将代码简化如下: <?php function curlGet($url) { $ch = curl_init(); curl_setopt($ ...

  5. 请写出css3样式的优先级,并排序

    !important(权重最大)1000>内嵌样式(style="")>内部样式>外联样式>@import url("url");

  6. Android dump命令查看某个apk是被谁安装的?

    adb shell dumpsys package packages > packageAll.txt     ORadb shell pm dump packages > package ...

  7. 基于EasyNVR摄像机无插件直播方案二次开发实现自己的摄像机IPC-NVR无插件化直播解决方案

    背景介绍 在之前的博客中<基于EasyNVR实现RTSP/Onvif监控摄像头Web无插件化直播监控>,对EasyNVR所实现的功能我们已经有较多描述,这些也在方案地址:http://ww ...

  8. Docker 搭建本地 cnpm 私有仓库

    1.首先启动本地的docker 2.下载 cnpm 仓库 git clone https://github.com/cnpm/cnpmjs.org.git 3.进入到 cnpmjs.org目录 cd ...

  9. Github-Dorks与辅助工具

    前言 Github搜索功能非常强大且有用,可用于在开源出来的Github仓库中搜索敏感数据.可以找到敏感的个人和/或组织信息(例如私钥,凭据,身份验证令牌等). 文中的github dork列表可以在 ...

  10. 【计算机视觉】【神经网络与深度学习】YOLO v2 detection训练自己的数据2

    1. 前言 关于用yolo训练自己VOC格式数据的博文真的不少,但是当我按照他们的方法一步一步走下去的时候发现出了其他作者没有提及的问题.这里就我自己的经验讲讲如何训练自己的数据集. 2.数据集 这里 ...