本文为转载,本人亲测可用,感谢原作者,原文在这里

一、由于公司项目需要,需要将表格数据导出为EXCEL表格数据。

环境React+Ant Design

二、安装插件js-export-excel

 
// yarn安装-记得以管理员身份执行
yarn add js-export-excel
// npm安装
npm install js-export-excel
 

三、代码事例
页面先引入安装的插件

 
import ExportJsonExcel from 'js-export-excel';
按钮:
 return (
<div>
<Button onClick={this.downloadExcel}>导出Excel表格</Button>
</div>
)

调用:

 
downloadExcel = () => {
const data = this.state.data ? this.state.data : '';//表格数据
var option={};
let dataTable = [];
if (data) {
for (let i in data) {
if(data){
let obj = {
'组织ID': data[i].id,
'组织代码': data[i].organization_code,
'组织名称': data[i].organization_name,
}
dataTable.push(obj);
}
}
}
option.fileName = '组织信息'
option.datas=[
{
sheetData:dataTable,
sheetName:'sheet',
sheetFilter:['组织ID','组织代码','组织名称'],
sheetHeader:['组织ID','组织代码','组织名称'],
}
]; var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
}

  其中的组织ID,代码,名称是要导出的数据,自己要导出什么根据自己的实际情况导出即可,然后点击按钮导出即可。

js excel导出 前端实现(转载)的更多相关文章

  1. 前端JS Excel导出

    本文转载自:https://blog.csdn.net/plmzaqokn11/article/details/73604705 下载table2Excel插件 <input type=&quo ...

  2. js Excel导出

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...

  3. js excel导出功能

    <html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...

  4. vue后台_纯前端实现excel导出/csv导出

    之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...

  5. js导入excel&导出excel

    Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick= ...

  6. 【转】js 中导出excel 较长数字串会变为科学计数法

    [转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...

  7. 二十六、【开源框架】EFW框架Winform前端开发之Grid++Report报表、条形码、Excel导出、图表控件

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  8. js-xlsx 实现前端 Excel 导出(支持多 sheet)

    之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能,现在再介绍一下如何使用 js-xlsx 进行 excel 导出. [实现步骤] 1. 首先安装依赖 npm install xlsx ...

  9. 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

    我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...

随机推荐

  1. mysql权限管理,用户管理

    1 创建用户 mysql> truncate table user; //先删除所有用户 mysql> CREATE USER  'paris'@'localhost' IDENTIFIE ...

  2. spark streaming (二)

    一.基础核心概念 1.StreamingContext详解 (一) 有两种创建StreamingContext的方式:             val conf = new SparkConf().s ...

  3. Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2) A B C D 暴力 水 二分 几何

    A. Vicious Keyboard time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. C++ 局部静态变量,全局变量,全局静态变量,局部变量的区别和联系

    C++变量根据定义位置的不同,具有不同的作用域,作用域可分为6种:全局作用域,局部作用域,语句作用域,类作用域,命名作用域和文件作用域. 从作用域看: 全局变量具有全局作用域.全局变量只需在一个源文件 ...

  5. 使用无线网卡搭建虚拟wifi

    1.首先以管理员身份运行命令提示符 开始->搜索框输入cmd,出来的cmd.exe上右键管理员身份运行,或者win+R打开运行提示框,输入cmd并回车. 2.设置“虚拟Wifi网卡”模式 敲入命 ...

  6. google的几道面试题

    Question1:如何判断两个矩形是否有重叠区域? Answer(java): public boolean checkCross(Rectangle m, Rectangle n) { //求出m ...

  7. Visual Studio Code 如何编写运行 C、C++ 程序?

    0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...

  8. 816D.Karen and Test 杨辉三角 规律 组合

    LINK 题意:给出n个数,每个数对间进行加或减,结果作为下一层的数,问最后的值为多少 思路:首先我们发现很像杨辉三角,然后考虑如何计算每个数对结果的贡献值,找规律可以发现当数的个数为偶数时,其所在层 ...

  9. Python学习笔记(十五)用Python获取本地数据

    f1 = open(r'E:\Python\Data\data1.txt') #读取data1.txt文件,使用系统默认缓冲区大小, 为了读取快点,使用缓存吧! f = open(r'E:\Pytho ...

  10. [Luogu 1196] NOI2002 银河英雄传说

    [Luogu 1196] NOI2002 银河英雄传说 话说十六年前的 NOI 真简单... 我一开始还把题看错了- 题意:一群人,每个人各自成一队,每次命令让两队首位相接合成一队,每次询问问你某两个 ...