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

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

环境React+Ant Design

二、安装插件js-export-excel

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

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

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

调用:

 
  1. downloadExcel = () => {
  2. const data = this.state.data ? this.state.data : '';//表格数据
  3. var option={};
  4. let dataTable = [];
  5. if (data) {
  6. for (let i in data) {
  7. if(data){
  8. let obj = {
  9. '组织ID': data[i].id,
  10. '组织代码': data[i].organization_code,
  11. '组织名称': data[i].organization_name,
  12. }
  13. dataTable.push(obj);
  14. }
  15. }
  16. }
  17. option.fileName = '组织信息'
  18. option.datas=[
  19. {
  20. sheetData:dataTable,
  21. sheetName:'sheet',
  22. sheetFilter:['组织ID','组织代码','组织名称'],
  23. sheetHeader:['组织ID','组织代码','组织名称'],
  24. }
  25. ];
  26.  
  27. var toExcel = new ExportJsonExcel(option);
  28. toExcel.saveExcel();
  29. }

  其中的组织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. (转)iOS开发——来改掉那些被禁用的方法吧(持续更新中)

    iOS平台在快速的发展,各种接口正在不断的更新.随着iOS9的发布,又有一批老方法不推荐使用了,你若调用这些方法,运行的结果是没有问题的,但是会出现警告“***is deprecated :first ...

  2. HDU 5489 二分 LIS

    Removed Interval Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  3. array_uintersect、array_uintersect_assoc、array_uintersect_uassoc 的使用方法

    和 array_intersect 类似,只不过 array_uintersect* 系列函数的值比较使用自定义函数: 键的比较,array_uintersect.array_uintersect_a ...

  4. HDU 6194 后缀数组

    string string string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  5. 「Linux」centos7更新python3.6后yum报错问题

    1. #vi /usr/bin/yum 因为我的旧版本是2.7,所以将#!/usr/bin/python改为#!/usr/bin/python2.7就可以了! 退出保存 2.可能还会报错 就修改/us ...

  6. Linux下打包压缩war和解压war包 zip和jar

    ============jar================= 把当前目录下的所有文件打包成game.warjar -cvfM0 game.war ./ -c   创建war包-v   显示过程信息 ...

  7. MySQL免安装版配置部署

    MySQL下载地址:http://dev.mysql.com/downloads/mysql/ 1.Windows下安装MySQL 我下的是最新版的MySQL,解压后,目录如下: 将解压目录下默认文件 ...

  8. 树dp...吧 ZOJ 3949

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5568 Edge to the Root Time Limit: 1 Secon ...

  9. 分治思想 特别常用 Codeforces Beta Round #80 (Div. 1 Only) D

    D. Time to Raid Cowavans time limit per test 4 seconds memory limit per test 70 megabytes input stan ...

  10. SDUT 3917

    UMR 现在手里有 n 张康纳的表情,最上面一张是玛吉呀巴库乃.现在 UMR 如果每次把最上面的 m 张牌移到最下面而不改变他们的顺序及朝向,那么至少经过多少次移动玛吉呀巴库乃才会又出现在最上面呢? ...