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读取的数据一般都是数据库中视图的数据, ...
随机推荐
- 升级系统后maxvim不能用,重新下载编译个
1. 获取macvim源代码git clone https://github.com/b4winckler/macvim.git 2 配置及编译 编译选项 ./configure --with-fea ...
- word----遇到问题-----word中插入的图片无法左对齐----格式按钮为灰色
当我们在用word时,有时要插入图片,却发现,插入的图片只在中间位置,不能拖到左边,这时怎么办呢 主要是图层的高低原因导致的不能拖动. 这个时候我们只需要设置一下图片的图层类型即可. 对着图片右键在设 ...
- opencv透视变换GetPerspectiveTransform的总结
对于透视变换,必须为map_matrix分配一个3x3数组,除了3x3矩阵和三个控点变为四个控点外,透视变化在其他方面与仿射变换完全类似.具体可以参考:点击打开链接 主要用到两个函数WarpPersp ...
- ios错误码:NSError对象.code
1. URL Loading System Error Codes These values are returned as the error code property of an NSError ...
- nginx日志增加cookie信息
一.获取全部cookie信息 这个比较方便,直接在nginx.conf文件中添加$http_cookie log_format main '[$time_local] - $remote_addr:$ ...
- 效应量Effect Size
sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&am ...
- Python学习笔记(三十三)常用内置模块(2)collections_namedtuple_deque_defaultdict_OrderedDict_Counter
摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431953239 ...
- JAVA多线程提高三:线程范围内共享变量&ThreadLocal
今天我们学习的是如何在线程自己的范围内达到变量数据的共享,而各个线程之间又是互相独立开来,各自维护的,即我们说的ThreadLocal的作用. 一.概念 可以将每个线程用到的数据与对应的线程号存放到一 ...
- ASP .NET登录界面用户验证码代码
//ASP .NET用户登录界面经常用到验证码代码如下 private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码 ...
- 【BZOJ】3039: 玉蟾宫 悬线法
[题意]给定01矩阵,求最大全1子矩阵.n,m<=1000. [算法]动态规划(悬线法) [题解]★对于01矩阵中的任意一个全1极大子矩阵,都可以在其上边界遇到的障碍点处悬线到下边界的点x,则点 ...