项目中需要做一个上传表格的功能,具体为上传本地excel文件并拼成json传给后台然后保存用户上传的表格数据,但是碰到一个问题,就是这个表格是带表头的,如下:
表格的第一行只有一个表头并且独占一行,我用的是xlsx.full.min.js解析代码如下
if (!obj.files) {
return;
}
try {
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
}
//读取页面demo中的内容
//这里的wb.SheetNames[0]是excel表格中第一个表格页的名字默认应该是sheel1,
//但是这个名字用户可以自定义,所以不能写死,得获取表格名字
demo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
//获取选择的文件类型,调用不同的接口保存至数据库
upload_grid(demo);
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
//进行网页html结构的替换
$("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf_xls(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');
} catch (e) {
alert('请选择对应的文件!'); //异常捕获
}
这里直接读取出来的demo格式是
由此可见每一个demo[i]的第一个key都成了表头,正常格式应该是[{"行政区划代码":"xxxx","监测年度":"xxxx"}]这种的,所以我找到上边变量的wb,删除了输出中的属性A1也就是解析出的表头数据,要删除的东西长这样
加了删除的代码长这样,就是在demo前加一个delete就行了
if (!obj.files) {
return;
}
try {
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
delete wb.Sheets[wb.SheetNames[0]].A1
console.log(wb)
}
//读取页面demo中的内容
demo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
console.log(demo)
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
//进行网页html结构的替换
// $("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf_xls(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');
} catch (e) {
alert('请选择对应的文件!'); //异常捕获
}
这样一顿操作,删除了A1之后的demo长这样
看这个时候的demo相比之前的已经规整多了,这个时候只需要遍历demo,重组数据就行了
if (!obj.files) {
return;
}
try {
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
if (rABS) {
wb = XLSX.read(btoa(fixdata(data)), {//手动转化
type: 'base64'
});
} else {
wb = XLSX.read(data, {
type: 'binary'
});
delete wb.Sheets[wb.SheetNames[0]].A1
console.log(wb)
}
//读取页面demo中的内容
demo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
console.log(demo)
var arr = []
for(var i=1;i<demo.length;i++){
arr[i] = {}
arr[i].adcode = demo[i]["__EMPTY"];
arr[i].year = demo[i]["__EMPTY_1"];
arr[i].gdcode = demo[i]["__EMPTY_2"];
arr[i].point_name = demo[i]["__EMPTY_3"];
arr[i].longitude = demo[i]["__EMPTY_4"];
arr[i].latitude = demo[i]["__EMPTY_5"];
arr[i].reference = demo[i]["__EMPTY_6"];
}
console.log(arr)
};
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
//进行网页html结构的替换
// $("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf_xls(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');
} catch (e) {
alert('请选择对应的文件!'); //异常捕获
}
然后arr就是我们要传给后台的json数据了,但是!!!输出转为string的arr傻眼了,这他娘的多了一个null是啥玩意啊???为啥会有null啊,然后就想了一笨办法,用"null,"分隔一下
var this_data = JSON.stringify(arr).split("null,")
console.log("["+this_data[1])
终于完毕了,最后是这样
终于格式正确了,上传成功了……