Ant Design Pro实现导出Excel
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的更多相关文章
- Ant Design Pro (中后台系统)教程
一.概念:https://pro.ant.design/docs/getting-started-cn(官方网站) 1.Ant Design Pro 是什么: https://www.cnblogs ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
- ant design pro (十四)advanced 使用 CLI 工具
一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提 ...
- ant design pro (十三)advanced 错误处理
一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...
- ant design pro (十二)advanced UI 测试
一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
随机推荐
- Research Guide for Neural Architecture Search
Research Guide for Neural Architecture Search 2019-09-19 09:29:04 This blog is from: https://heartbe ...
- redis中get值显示为16进制字符串的解决方法
Linux系统中,通过xshell登录redis,当根据某个key进行get取值时,取到的值为“\xc2\xed\xc0\xad\xcb\xb9\xbc\xd3”格式的十六进制字符串,原因是值中的中文 ...
- P1981 表达式求值
P1981 表达式求值 题解 这个题联想一下 P1310 表达式的值 思路就是输入中缀式,转成后缀式,然后按后缀式计算,完美!! but!! 会严重RE,因为你可能会输入中缀式的时候输 ...
- windows10 dos窗口输出卡住
https://blog.csdn.net/u013866090/article/details/82790864 原本每间隔一秒就会输出一次数据,但是当鼠标点击窗口的其他区域后输出就停止了,在点击键 ...
- matlab学习笔记4--导入和导出Internet数据
一起来学matlab-matlab学习笔记4 数据导入和导出_4 导入和导出Internet数据 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合 ...
- Python 图片Resize.py
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 19-7-14 下午4:54 # @Author : RongT import cv2 ...
- [LeetCode] 437. Path Sum III 路径和 III
You are given a binary tree in which each node contains an integer value. Find the number of paths t ...
- java8(2)--- Stream API
1.简述 Java8中有两大最为重要的改变.第一个是 Lambda 表达式:另外一 个就是 Stream API. Stream 是处理集合的抽象概念,它可以指定你希望对集合进行的操作,可以执行非常复 ...
- VS Code 编译C++
1.安装VS Code 2.安装插件 在左侧插件库 必须: c/c++ 插件 非必需: C++ Intellisense Include Autocomplete 3.安装编译调试环境mingw Mi ...
- 【神经网络与深度学习】【CUDA开发】服务器(多GPU)caffe安装和编译
一. 前提 多GPU交互在神经网络是常见的,所以在安装caffe之前需要安装NCCL,来保证多GPU之间的相互交流. 多GPU,这里指的是2个及2个以上英伟达显卡,而不是笔记本中的集显和独显. 二. ...