最近在做项目,前端进行处理数据,导出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的更多相关文章

  1. java代码导出数据到Excel、js导出数据到Excel(三)

     jsp内容忽略,仅写个出发按钮:          <button style="width: 100px" onclick="expertExcel()&quo ...

  2. 1.ASP.NET MVC使用EPPlus,导出数据到Excel中

    好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangshe ...

  3. phpexcel如何读取excel的数据和如何导出数据到excel

    phpexcel如何读取excel的数据和如何导出数据到excel 一.总结 一句话总结:去官网看参考手册和api,或者找中文的博客或者参考手册 1.phpexcel插件如何下载? 其实这些插件不仅可 ...

  4. 导出数据到Excel方法总结

    一,问题的提出 近来在网上经常有人问怎样把数据导出到Excel中?针对这个问题网上也有很多资料.大都比较的琐碎.本人当前从事的项目中,刚好涉及到这些内容.就顺便做了一些归纳整理.共享给大家.避免大家再 ...

  5. 导出数据到Excel表格

    开发工具与关键技术:Visual Studio 和 ASP.NET.MVC,作者:陈鸿鹏撰写时间:2019年5月25日123下面是我们来学习的导出数据到Excel表格的总结首先在视图层写导出数据的点击 ...

  6. Java操作Jxl实现导出数据生成Excel表格数据文件

    实现:前台用的框架是Easyui+Bootstrap结合使用,需要引入相应的Js.Css文件.页面:Jsp.拦截请求:Servlet.逻辑处理:ClassBean.数据库:SQLserver. 注意: ...

  7. 手把手教你springboot中导出数据到excel中

    手把手教你springboot中导出数据到excel中 问题来源: 前一段时间公司的项目有个导出数据的需求,要求能够实现全部导出也可以多选批量导出(虽然不是我负责的,我自己研究了研究),我们的项目是x ...

  8. Dynamics CRM导出数据到Excel

    原创地址:http://www.cnblogs.com/jfzhu/p/4276212.html 转载请注明出处 Pivot Table是微软BI的一个重要工具,所以这里讲一下Dynamics CRM ...

  9. MVC导出数据到EXCEL新方法:将视图或分部视图转换为HTML后再直接返回FileResult

    导出EXCEL方法总结 MVC导出数据到EXCEL的方法有很多种,常见的是: 1.采用EXCEL COM组件来动态生成XLS文件并保存到服务器上,然后转到该文件存放路径即可: 优点:可设置丰富的EXC ...

随机推荐

  1. UML开发工具Rose ralation的破解安装,

    UML开发工具Rose ralation的在windows764破解安装, 安装下载还可以参考:http://www.cnblogs.com/leaven/p/3718361.html 跟大家分享怎么 ...

  2. java排序算法之冒泡排序(Bubble Sort)

    java排序算法之冒泡排序(Bubble Sort) 原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数 ...

  3. LeetCode & Q66-Plus One-Easy

    Array Description: Given a non-negative integer represented as a non-empty array of digits, plus one ...

  4. Python——cmd调用(os.system阻塞处理)

    os.system(返回值为0,1,2) 0:成功 1:失败 2:错误 os.system默认阻塞当前程序执行,在cmd命令前加入start可不阻塞当前程序执行. 例如: import os os.s ...

  5. Python内置函数(12)——str

    英文文档: class str(object='') class str(object=b'', encoding='utf-8', errors='strict') Return a string  ...

  6. github入门:设置添加ssh key<转>

    GitHub是个分布式的版本控制库.github通过git使用,可以方便的记录代码版本. 通过github可以学习优秀的代码,可以改进提交其他项目中的bug,借助社区力量促进软件优化完善. 国内外大量 ...

  7. 新概念英语(1-7)Are you a teacher?

    What is Robert's job? A:I am a new student. My name is Robert. B:Nice to meet you. My name's Sophie. ...

  8. Spring Security 入门(1-3-3)Spring Security - logout 退出登录

    要实现退出登录的功能我们需要在 http 元素下定义 logout 元素,这样 Spring Security 将自动为我们添加用于处理退出登录的过滤器 LogoutFilter 到 FilterCh ...

  9. mysql自带的example测试数据库导入Centos6.5

    1.下载数据库 下载地址: [test数据库] (https://github.com/datacharmer/test_db) 不出意外的话,下载下来是个unzip文件. 2.上传到数据库服务器 r ...

  10. Mybatis自动生成Xml文件,针对字段类型为text等会默认产生XXXXWithBlobs的方法问题

    默认情况下产生的Mapper.xml里面存在: 需要修改generatorConfiguration.xml,里面的table加属性,如: <table domainObjectName=&qu ...