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

一、由于公司项目需要,需要将表格数据导出为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. php扩展库 说明

    1 zlib是提供数据压缩用的函式库, 2 libxml2 Libxml2 is the XML C parser and toolkit developed for the Gnome projec ...

  2. 【51nod1965】奇怪的式子

    Portal --> 51nod1965 Solution 怎么说呢..这题..做的有点痛苦.. 首先看这个式子长得..比较奇怪,指数里面那个加号有点烦人,而且这个函数不是一个积性函数也有点烦人 ...

  3. Azure 上SQL Database(PaaS)Time Zone时区问题处理

    在Azure上面的PaaS时间都是以UTC时间为准(云的世界里基本上都是以UTC时间为标准的),所以以前在本地SQL Server上面常用的GetDate()方法会碰到问题,在中国获取的时间会被当前时 ...

  4. 子序列 sub sequence问题,例:最长公共子序列,[LeetCode] Distinct Subsequences(求子序列个数)

    引言 子序列和子字符串或者连续子集的不同之处在于,子序列不需要是原序列上连续的值. 对于子序列的题目,大多数需要用到DP的思想,因此,状态转移是关键. 这里摘录两个常见子序列问题及其解法. 例题1, ...

  5. NOIP模拟1

    期望得分:100+100+100=300 实际得分:94+96+97=287 T1  #6090. 「Codeforces Round #418」尘封思绪 #include<cstdio> ...

  6. vim如何粘贴

    刚开始vim的学习之旅,在进行粘贴操作时遇到了麻烦. 教程上粘贴的命令是p,但我发现该命令只适用于从vim到vim的复制(p未必就仅仅局限于此,但我目前所了解到的情况如此),当我从网上复制了一段代码想 ...

  7. jQuery技术内幕 深入解析jQuery架构设计与实现原理

    jquery的外衣 jquery是一个轻量级的JS框架 //以下截取自jquery源码片段 (function( window, undefined ) { /* 源码内容 */ })( window ...

  8. C#为何不推荐在构造函数中访问虚成员

    如果在一个类中定义了虚属性或者虚方法,又在构造函数中访问了这个虚属性或方法,此时VisualStudio是不会给出警告,并且编译也没有问题,但是如果安装了Resharper插件则会给出警告提示:&qu ...

  9. 【leetcode 简单】第十八题 爬楼梯

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

  10. 2017ACM暑期多校联合训练 - Team 5 1001 HDU 6085 Rikka with Candies (模拟)

    题目链接 Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, s ...