客户给我一份省市区的excel,让我做成json,以便在项目中使用,我看了下,excel的数据十分规整,这也便于我去整合数据。excel如下图
废话不多说,先把excel另存为csv格式,然后js中使用excel的js插件,引入xlsx.core.min.js
1、使用<input>标签接收上传文件。代码如下:
<input type="file"id="fileUploader"name="fileUploader"accept=".csv"/>
2、监听input change 事件
$(document).ready(function(){
$("#fileUploader").change(function(evt){
// 上传文件处理逻辑...
});
});
</script>
3、显示在页面上,便于copy
<label id="jsonObject"> </label>
完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
excel转json
<input type="file" id="fileUploader" name="fileUploader" accept=".csv"/>
</br></br>
JSON : <label id="jsonObject"> </label>
</div>
</body>
<script type="text/javascript" src="js/jquery.js" ></script>
<script lang="javascript" src="js/xlsx.core.min.js"></script>
<script>
$(document).ready(function(){
$("#fileUploader").change(function(evt){
var selectedFile = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(selectedFile);
var data = [];
reader.onload = function(event) {
var num = null;
var relArr = this.result.split("\r\n");
if(!$.isEmptyObject(relArr) && relArr.length > 1) {
for(var key = 0; key < relArr.length; key++) {
var values = relArr[key];
if(!$.isEmptyObject(values)) {
var objArr = values.split(",");
if(objArr[3] == '1') {
//新建省
let city = {"code": objArr[0], "name": objArr[1], "cityList": []}
data.push(city)
}else if(objArr[3] == '2') {
//新建市
let city = {"code": objArr[0], "name": objArr[1], "areaList": []}
let cityList = data[data.length-1].cityList;
cityList.push(city);
}else if(objArr[3] == '3') {
//新建区
let area = {"code": objArr[0], "name": objArr[1]}
let cityList = data[data.length-1].cityList;
let areaList = cityList[cityList.length-1].areaList;
areaList.push(area);
}
}
}
}
console.log(data);
$('#jsonObject').text(JSON.stringify(data));
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
});
});
</script>
</html>
解释下具体代码逻辑,csv文件,是如下格式的
所以通过读取csv文件,获得this.result
字符串,并通过\r\n
分隔成relArr数组,此时每一行都是一个字符串,再通过,
分割成objArr数组。由于数据比较规整,省级下边就是该省的城市,城市下边就紧跟该市的区,所以可以每次取data
数据源的最后一个,并根据当前循环数据的层级,来决定存入第几层的父级。如果数据源并非这么顺序完好,也可以通过第三列的父节点编码
,去寻找应该放入哪个层级。
之后,就是下载地址
csv下载地址
json下载地址