js excel导出 前端实现(转载)
本文为转载,本人亲测可用,感谢原作者,原文在这里。
一、由于公司项目需要,需要将表格数据导出为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导出 前端实现(转载)的更多相关文章
- 前端JS Excel导出
本文转载自:https://blog.csdn.net/plmzaqokn11/article/details/73604705 下载table2Excel插件 <input type=&quo ...
- js Excel导出
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http ...
- js excel导出功能
<html> <head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件 ...
- vue后台_纯前端实现excel导出/csv导出
之前的文件下载功能一般是由前后端配合实现,由于项目需要,纯前端实现了一把excel的导出功能: 一.excel导出 1.安装依赖库 xlsx:这是一个功能强大的excel处理库,但是上手难度也很大,还 ...
- js导入excel&导出excel
Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick= ...
- 【转】js 中导出excel 较长数字串会变为科学计数法
[转]js 中导出excel 较长数字串会变成科学计数法 在做项目中,碰到如题的问题.比如要将居民的信息导出到excel中,居民的身份证号码因为长度过长(大于10位),excel会自动的将过长的数字串 ...
- 二十六、【开源框架】EFW框架Winform前端开发之Grid++Report报表、条形码、Excel导出、图表控件
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
- js-xlsx 实现前端 Excel 导出(支持多 sheet)
之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能,现在再介绍一下如何使用 js-xlsx 进行 excel 导出. [实现步骤] 1. 首先安装依赖 npm install xlsx ...
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据, ...
随机推荐
- 解题:SCOI 2014 方伯伯运椰子
题面 很有趣的一道题,看起来是个神奇网络流,其实我们只要知道网络的一些性质就可以做这道题了 因为题目要求流量守恒,所以我们其实是在网络中搬运流量,最终使得总费用减小,具体来说我们可以直接把这种“搬运” ...
- java类加载过程以及双亲委派机制
前言:最近两个月公司实行了996上班制,加上了熬了两个通宵上线,状态很不好,头疼.牙疼,一直没有时间和精力写博客,也害怕在这样的状态下写出来的东西出错.为了不让自己荒废学习的劲头和习惯,今天周日,也打 ...
- bundle adjustment原理(1)转载
转自菠菜僵尸 http://www.cnblogs.com/shepherd2015/p/5848430.html bundle adjustment原理(1) 那些光束平差的工具,比如SBA.SSB ...
- mysql 查看服务器正在运行的进程
有时候遇到mysql突然很久没有响应的情况,我们就想知道背后发生了什么. 这时候我们就可以通过以下的命令来查看mysql正在处理的进程: show processlist; 这个命令可以通过navic ...
- 用for语句从数组中剔除数据,注意,count,要放到for语句之外才行
date_default_timezone_set('Asia/Shanghai'); $arr = array( ,), ,), ,), ,) ); print_r($arr); ;$i<co ...
- tp 中 where条件,字段和字段的大小比较
$map = array( , 'start_time' => array('lt',$now), 'end_time' => array('gt',$now), , '_string' ...
- zabbix添加cpu使用率图形监控
zabbix版本: 3.2.5 zabbix 自带的windows模板中没有监控cpu使用率的,可以在模板里自己添加 1. 配置 ---> 模板---> Template OS Windo ...
- <LC刷题二>回文字符串判断之leetcode125&234
其他刷题记录见博客首页 1,leecode125 验证回文串 原题: 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. ...
- 重构改善既有代码设计--重构手法13:Inline Class (将类内联化)
某个类没有做太多事情.将这个类的所有特性搬移到另一个类中,然后移除原类. 动机:Inline Class (将类内联化)正好于Extract Class (提炼类)相反.如果一个类不再承担足够责任.不 ...
- SpringCloud(四)服务发现与消费:以ribbon为例
说明: ribbon是spring-cloud中作为服务消费者的一种角色,客户端可以通过它来对服务提供者的服务进行消费, 比如本例中是服务提供者注册到注册中心,服务提供者提供了一个服务接口,返回一个h ...