前端导出excel数据-jsonToExcel
咳咳,好久没有写博了。。。
在工作中遇到了纯前端,将数据导出为excel文件。正文开始:
第一步 安装依赖:
npm i xlsx
第二步 写导出函数:
import XLSX from 'xlsx' const exportJsonToExcel = (dataArr) => {
const now = new Date()
const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//这里的数据是用来定义导出的格式类型
const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataArr);//通过json_to_sheet转成单页(Sheet)数据
saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), `导出文件-${now.getFullYear()}${now.getMonth() + 1}${now.getDate()}.${wopts.bookType}`);
} // 导出excel
const saveAs = (obj, fileName) => {
var tmpa = document.createElement("a");
tmpa.download = fileName || "下载";
const href = URL.createObjectURL(obj); //绑定a标签
tmpa.href = href;
tmpa.click(); //模拟点击实现下载
setTimeout(function () { //延时释放
URL.revokeObjectURL(href); //用URL.revokeObjectURL()来释放这个object URL
}, 100);
} const s2ab = (s) => {
if (typeof ArrayBuffer !== 'undefined') {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
} else {
var buf = new Array(s.length);
for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
} export default exportJsonToExcel
第三步 调用exportJsonToExcel方法:
// 处理下载按钮, 少于1000条,则前端下载
handleClickDownload = () => {
exportToExcel(data)
} // 其中传入给exportToExcel的数据格式如下:是一个对象的数组,一个对象是一行的数据,key是表头, value是数据
data = [{'联系电话':item.Tel,
'客户标签':item.CustomerLableValue,
'客户状态':item.StateValue,
'距上次跟进(天)':item.OutTrackDay,
'客户来源':item.SourceValue,
'业务员':item.SalesmanName,
'省份':item.ProvinceName,
'城市':item.CityName,
'区县':item.CountyName,
'学历':item.EducationName,
'性别':item.Gender == 0 ? '男':'女',
'政治面貌':item.PoliticalOutlookName,
'QQ':item.QQ,
'类型':item.Type==1?'个人客户':'企业客户',
'联系次数':item.ContactNum,
'微信':item.WeChat,
'错误信息': item.ErrorInfo
}]
小结:
第三步的调用非常简单,将想要导出的数据格式化一下,传给exportToExcel方法即可。想哪里调用都可以呦。
第二步,让我新学习了两个方法:URL.createObjectURL() 和 URL.revokeObjectURL() ;
objectURL = URL.createObjectURL(blob):静态方法创建一个字符串,包含blob的url。这个新的url表示指定的File对象或者Blob对象。
每次调用这个方法时候,都会创建一个新的URL对象,即便使用的是相同的参数,因此,需要使用URL.revokeObjectURL() 来释放。
URL.revokeObjectURL(objectURL): 释放需要在使用后释放,如果在使用前释放,则objectURL就为undefined。 举栗子:
<!DOCTYPE html>
<html lang="en"> <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>test url</title>
</head> <body>
<p>test revoke before use</p>
<input type="file" id="test" />
<br />
<br />
<br />
<p>test use revoke use</p>
<input type="file" id="test3" />
<script>
$('#test').on('change', function (e) {
var newImg = document.createElement("img");
var url = URL.createObjectURL(e.target.files[0])
console.log(url); newImg.src = url;
URL.revokeObjectURL(url); // 这里释放了!没有图片
document.body.appendChild(newImg);
console.log(url);
}); $('#test3').on('change', function (e) {
var newImg = document.createElement("img");
var url = URL.createObjectURL(e.target.files[0]) newImg.src = url;
newImg.onload = function () {
URL.revokeObjectURL(url); // onload时候释放,没有问题,因为已经加载完毕!
document.body.appendChild(newImg);
}
});
</script>
</body> </html>
前端导出excel数据-jsonToExcel的更多相关文章
- 前端导出Excel兼容写法
今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...
- 前端导出Excel
1.首先,需要下载一个叫better-xlsx,的插件,以yarn 为例 ' yarn add better-xlsx --save '下载相关依赖包( npm 方式 ' npm i better-x ...
- 踹掉后端,前端导出Excel!
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一个下载链接,但有时候我们只想导出前端页面上已经有了的数据,不想再调后端导出接口浪费服务器资源,学习本文demo例子,我们踹掉后端,直接在前 ...
- [转] Asp.Net 导出 Excel 数据的9种方案
湛刚 de BLOG 原文地址 Asp.Net 导出 Excel 数据的9种方案 简介 Excel 的强大之处在于它不仅仅只能打开Excel格式的文档,它还能打开CSV格式.Tab格式.website ...
- 前端导出excel表
前端导出excel表 方式一: 前端js实现 : https://www.cnblogs.com/zhangym118/p/6235801.html 方式二: java后端实现: https://bl ...
- oracle-sql脚本导出EXCEL数据
在数据库中,经常有业务人员提出需求导出数据库中的业务数据,而且是每天.每周或每月定时导出.为了方便,可将sql查询的脚本 通过下面脚本来导出EXCEL数据. 1.将查询sql脚本(AAA.sql)放到 ...
- js前端导出excel
此例子是利用html特性,纯前端导出excel,样式不好看,兼容主流浏览器. var tableid = jQuery(this).closest("div.tab-label-wrap&q ...
- flask使用tablib导出excel数据表
在网页中常常有导出数据的需求,尤其是一下管理类平台.在flask中要导出excel数据表,通常可以使用xlwt库,创建文件并逐行写入数据,但是使用起来总是感觉很麻烦.tablib库相对操作更加方便. ...
- vue导出excel数据表格功能
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来. 第一步安装依赖包,需要把代码下载你的项目当中 cnpm install file-saver c ...
随机推荐
- Ubuntu ARM更改为国内源
关键词:ubuntu arm ubuntu-ports 国内源 镜像 阿里源 apt apt-get install update 0%working 速度慢 rk3399 开发板 ...
- thinkphp 找数据库某个字段为空的数据,PHP 数据调取 空数据
$arr['dingwei'] = array('EXP','is null');
- 麒麟子Cocos Creator实用技巧
大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- #Java学习之路——基础阶段(第八篇)
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- Java语言
Java语言基础教程 本文将放入菜单栏中方便学习,记得点赞哦! Java分为3个体系,为JavaSE,JavaEE,JavaME,是一种面向对象的程序设计语言,记住Oracle公司收购了 Sum公司, ...
- [Swift]LeetCode21. 合并两个有序链表 | Merge Two Sorted Lists
Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...
- [Swift]LeetCode63. 不同路径 II | Unique Paths II
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...
- [Swift]LeetCode121. 买卖股票的最佳时机 I | Best Time to Buy and Sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- [Swift]LeetCode312. 戳气球 | Burst Balloons
Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...