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读取的数据一般都是数据库中视图的数据, ...
随机推荐
- (转)iOS开发——来改掉那些被禁用的方法吧(持续更新中)
iOS平台在快速的发展,各种接口正在不断的更新.随着iOS9的发布,又有一批老方法不推荐使用了,你若调用这些方法,运行的结果是没有问题的,但是会出现警告“***is deprecated :first ...
- HDU 5489 二分 LIS
Removed Interval Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- array_uintersect、array_uintersect_assoc、array_uintersect_uassoc 的使用方法
和 array_intersect 类似,只不过 array_uintersect* 系列函数的值比较使用自定义函数: 键的比较,array_uintersect.array_uintersect_a ...
- HDU 6194 后缀数组
string string string Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 「Linux」centos7更新python3.6后yum报错问题
1. #vi /usr/bin/yum 因为我的旧版本是2.7,所以将#!/usr/bin/python改为#!/usr/bin/python2.7就可以了! 退出保存 2.可能还会报错 就修改/us ...
- Linux下打包压缩war和解压war包 zip和jar
============jar================= 把当前目录下的所有文件打包成game.warjar -cvfM0 game.war ./ -c 创建war包-v 显示过程信息 ...
- MySQL免安装版配置部署
MySQL下载地址:http://dev.mysql.com/downloads/mysql/ 1.Windows下安装MySQL 我下的是最新版的MySQL,解压后,目录如下: 将解压目录下默认文件 ...
- 树dp...吧 ZOJ 3949
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5568 Edge to the Root Time Limit: 1 Secon ...
- 分治思想 特别常用 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 ...
- SDUT 3917
UMR 现在手里有 n 张康纳的表情,最上面一张是玛吉呀巴库乃.现在 UMR 如果每次把最上面的 m 张牌移到最下面而不改变他们的顺序及朝向,那么至少经过多少次移动玛吉呀巴库乃才会又出现在最上面呢? ...