【js-xlsx和file-saver插件】前端导出数据到excel
最近在做项目,前端进行处理数据,导出excel中,还是遇到不少问题,这里将其进行总结一下,博主是vue框架开发,借用file-saver和xlsx插件进行导出excel,我们来看下代码和效果。地址链接如下:https://www.npmjs.com/package/js-xlsx
博主自己封装了一个方法xlsx.js,然后在vue中进行调用就行,如下:
import fs from 'file-saver'
import XLSX from 'xlsx'
export default (json, fields, filename = '测试数据.xlsx') => { json.forEach(item => {
for (let i in item) {
if (fields.hasOwnProperty(i)) {
item[fields[i]] = item[i];
}
delete item[i]; //删除原先的对象属性
}
}) let sheetName = filename //excel的文件名称
let wb = XLSX.utils.book_new() //工作簿对象包含一SheetNames数组,以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }) //将JS对象数组转换为工作表。
wb.SheetNames.push(sheetName)
wb.Sheets[sheetName] = ws
const defaultCellStyle = { font: { name: "Verdana", sz: 13, color: "FF00FF88" }, fill: { fgColor: { rgb: "FFFFAA00" } } };//设置表格的样式
let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary', cellStyles: true, defaultCellStyle: defaultCellStyle, showGridLines: false } //写入的样式
let wbout = XLSX.write(wb, wopts)
let blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
fs.saveAs(blob, filename + '.xlsx')
} 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;
}
}
调用当时如下,现在vue种引入该js文件,如下:
import xlsx from "../../utils/xlsx.js";
然后我们开始调用该方法,如下:
/**
* 导出到excel
**/
exportToExcel() {
let fields = {
test1:"测试1",
test2:"测试2"
};
this.getHeadMapList.forEach(item => {
fields['_' +item.key] = item.value; //动态生成的头
});
fields.totalCommission = "奖励总数"
//此处有vue大坑,不能直接使用xlsx(this.getComputedData),必须先转一下
let data = JSON.parse(JSON.stringify(this.getComputedData));
xlsx(data, fields, "奖励汇总列表"); },
此处有两处大坑,一个是data不能直接使用this.getBuildData ,而要将其转换一下,原因是this.getBuildData是计算
出来的,vue里面会自动更改它的值,这个bug找了好久才搞定,心塞。
getComputedData() {
let itemData = { };
let arr = []
this.dataList.map(item => {
this.formDataFitTable(
item.mapPrdTypeCommission,
this.getHeadMapList
).map(v => {
itemData['_' + v.key] = v.value;
});
itemData.sid = item.sid;
itemData.yearMonth = item.yearMonth;
itemData.totalCommission = item.totalCommission;
arr.push(itemData);
itemData = { }; //注意要将其清空,然后再重新遍历
});
return arr;
}
第二个问题是,插入头部的时候,会存在顺序问题,比如业务要求,我就要将测试1放在excel的第一列里面,而实际上,
对象是无序的,如果对象中单纯只包含数字类型的属性,或者字母类型的属性,是没有问题,而如果对象种既包含数字和字母
的属性,那么对象就会优先将数字排在最前面。先看下导出结果如下:
原本我是想将one这一列,放在第一列的位置上,然而结果却是排在最后面,当然因为我的数据格式里面就是既有数字类型,
又有字母类型的,看下数据格式:
{
"test1":"测试1",
"test2":"测试2",
1:“测试3”,
2:"测试4" ,
3:“测试5”,
4:"测试6" ,
5:“测试7”,
6:"测试8" ,
7:“测试9”,
8:"测试10" ,
9:“测试11”,
10:"测试12" ,
11:“测试13”,
12:"测试14" ,
13:“测试15”,
14:"测试16" ,
}
那么导出的结果就会是如下所示:
那么如何解决呢,其实只要将数字变为字符类型的就行了,上面代码也可以看出,加一个_就行了。
2:拼接数据数组,如何导出呢?
首先先看下效果,如下所示:这里数据虽然都打上了码,不过应该能明白博主的意思,显然这不是我们要的效果
那么我们怎么解决呢?博主这里想到了一个比较笨的方法,欢迎大家指教,就是将其key值变为跟前面几列的相同,如下数据格式:
exportToExcel() {
let field = {
test1: "测试1",
test2: "测试2",
test3: "测试3",
test4: "测试4"
};
let r = this.requestData({
pageIndex: null,
pageSize: null,
isNotPaging: true
});
this.dispatchDataList(r).then(data => {
if (data) {
let data1= data.data1;
let data2 = data.data2;
let arry = [
{
test1:"",
test2:"",
test3:"",
test4:""
},
{
test1:"总状态",
test2:"总次数",
test3:"总数量",
test4:"总奖励"
}
];
if(data2){
data2.forEach(item=>{
arry.push({
test1:item.type,
test2:item.rewardCount,
test3:item.totalQuality,
test3:item.totalCommission
})
})
xlsx( data1.concat(arry), field,"测试数据工作簿" );
}else{
this.showTips("warning", "无数据,请重新查询!")
}
}
});
},
方法比较笨,但是效果是没问题的,有好的方法,欢迎大家指正。其实就是相当于,将其变为某一行数据格式
插入到第一个数组里面,进行遍历第一个插入空的,是希望能够跟第一个数组隔开,转换之后效果如下:
好啦,前端导入excel差不多就这么多,有好的方法欢迎大家给我留言!
作者:婷风
出处:http://www.cnblogs.com/jtjds/p/8892510.html
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意
转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。
【js-xlsx和file-saver插件】前端导出数据到excel的更多相关文章
- java代码导出数据到Excel、js导出数据到Excel(三)
jsp内容忽略,仅写个出发按钮: <button style="width: 100px" onclick="expertExcel()&quo ...
- 1.ASP.NET MVC使用EPPlus,导出数据到Excel中
好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...
- phpexcel如何读取excel的数据和如何导出数据到excel
phpexcel如何读取excel的数据和如何导出数据到excel 一.总结 一句话总结:去官网看参考手册和api,或者找中文的博客或者参考手册 1.phpexcel插件如何下载? 其实这些插件不仅可 ...
- 导出数据到Excel方法总结
一,问题的提出 近来在网上经常有人问怎样把数据导出到Excel中?针对这个问题网上也有很多资料.大都比较的琐碎.本人当前从事的项目中,刚好涉及到这些内容.就顺便做了一些归纳整理.共享给大家.避免大家再 ...
- 导出数据到Excel表格
开发工具与关键技术:Visual Studio 和 ASP.NET.MVC,作者:陈鸿鹏撰写时间:2019年5月25日123下面是我们来学习的导出数据到Excel表格的总结首先在视图层写导出数据的点击 ...
- Java操作Jxl实现导出数据生成Excel表格数据文件
实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...
- 手把手教你springboot中导出数据到excel中
手把手教你springboot中导出数据到excel中 问题来源: 前一段时间公司的项目有个导出数据的需求,要求能够实现全部导出也可以多选批量导出(虽然不是我负责的,我自己研究了研究),我们的项目是x ...
- Dynamics CRM导出数据到Excel
原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...
- MVC导出数据到EXCEL新方法:将视图或分部视图转换为HTML后再直接返回FileResult
导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可: 优点:可设置丰富的EXC ...
随机推荐
- 验证码进阶(TensorFlow--基于卷积神经网络的验证码识别)
本人的第一个深度学习实战项目,参考了网络上诸多牛人的代码,在此谢过,因时间久已,不记出处,就不一一列出,罪过罪过. 我的数据集是我用脚本在网页上扒的,标签是用之前写的验证码识别方法打的.大概用了400 ...
- Python内置函数(21)——tuple
英文文档: The constructor builds a tuple whose items are the same and in the same order as iterable's it ...
- 网络IO超时的几种实现
一.select/poll/epoll int select(int maxfdp1, fd_set *readset, fd_set *writeset, fd_set *exceptset,str ...
- 关于阿里巴巴iconfont的使用方法
iconfont网址:http://www.iconfont.cn/ 说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清.用户在iconfo ...
- 我对let和const理解
let和const是es6新出的两种变量声明的方式,接下来我来分别针对这两个,聊一聊. let let它的出现,我认为主要是解决了块级作用域的需求.因为js以前本身是没有什么块级作用域的概念的(顶 ...
- nexus私服服务器意外关机后,本地不能下载jar包
主要记录一个小问题. 今天要做个需求,需要读取word文档中的表格来在生成数据库建表语句. 读取word文档,要添加maven依赖 <dependency> <groupId> ...
- Dictionary导致CPU暴涨
中午吃完饭回来,刚想眯一会,突然发现公司预警群报警,某台机器CPU100%,连续三次报警,心里咯噔一下,我新开发的程序就在这上面,是不是我的程序导致的?立马远程,oh my god,果然是. 二话不说 ...
- API之实用工具Postman 使用方法
测试接口与文档信息文件 Postman 安装与入门教程 下载与安装 官方网站:www.getpostman.com 下载完成后,直接安装 输入2次邮箱,密码,即可注册并登陆! 开发者使用: 创建文件夹 ...
- Scala:枚举类型的用法
枚举定义: /** * 场景类型的划分分类:划分出7类 */ object BuildingCalibrateHeightType extends Enumeration { type Buildin ...
- Struts(二十三):使用声名式验证
Struts2工程中的验证分为两种: 1.基于XWork Validation Framework的声明式验证:Struts2提供了一些基于XWork Validation Framework的内建验 ...