项目需要在一个Excel表里面导出一个主表和子表,export2Excel插件不适合本项目使用,故自己写了个功能,记录方便参考,代码有待优化!!!
项目框架:Vue.js
代码如下
getExportList() {
let jsonData = {
trade:{
tHeader: ["名字","性别","年龄","爱好","身份证号码"],
filterVal: ["name","sex","nlin","aihao","sfz"],
list: [{name: "名字啊",sex: "性别啊",aihao: "爱好啊",nlin:"年龄啊",sfz:"123456789012345678"},
{name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
{name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
{name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
{name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"},
{name: "名字哦",sex: "性别哦",nlin:"年龄哦",aihao: "爱好哦",sfz:"123456789012345678"}]
},
order:{
tHeader: ["附表名字","附表性别","附表年龄","附表爱好"],
filterVal: ["name","sex","nlin","aihao"],
list: [{name: "附表名字啊",sex: "附表性别啊",nlin:"附表年龄啊",aihao: "附表爱好啊",},
{name: "附表名字哦",sex: "附表性别哦",nlin:"附表年龄哦",aihao: "附表爱好哦",}]
}
}
this.exportPathMethod(jsonData)// 调用exportPathMethod对数据进行处理导出
},
exportPathMethod(data) {
/*
*注:csv文件:","逗号换列,\n换行,\t防止excel将长数字变科学计算法等样式
*/
//要导出的json数据
let mainLists = data.trade //主表
let subLists = data.order //副表
//## 数据处理
//一级表
let mainTitle = mainLists.tHeader;//一级标题
let mainTitleForKey = mainLists.filterVal;//一级过滤
let mainList = mainLists.list;//一级数据
let mainStr = [];
mainStr.push(mainTitle.join("\t,")+"\n"); //标题添加上换列转成字符串并存进数组
for(let i=0;i
注意
1. getExportList()用于点击获取数据,用按钮触发该事件。
2. exportPathMethod()用于处理数据并导出为CSV文件,配合后端获取对应的json数据格式即可导出。
3. trade为主表,order为副表,tHeader为表头,filterVal为过滤器,list为数据
4. 内容会根据filterVal过滤器来获取和排列,所以表头需要和过滤器对应,否则数据对应不上表头
留言
本文为个人项目开发过程的问题记录,代码有待优化,有小bug,后续优化在做文章更新,使用时请谨慎,使用本代码出现任何问题本人概不负责。