1 读取JSON
1.1 利用按钮的click事件读取
实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Read Json</title>
</head>
<body>
<input type="file" id="jsonFileUpload" accept=".json"><br><br>
<input id="read" type="button" value="读取">
<script type="text/javascript" src="js/jquery-3.6.0.slim.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#read').click(function () {
var selectedFile = $('#jsonFileUpload')[0].files[0];
var reader = new FileReader();
reader.readAsText(selectedFile, 'UTF-8');
reader.onload = function (e) {
var fileString = e.target.result;
var jsonObj = JSON.parse(fileString);
// 后续可以对读取的JSON对象做进一步处理
}
}
);
})
</script>
</body>
</html>
另外，我们可以获取上传文件的文件名或文件类型（即扩展名），代码如下：
// 获取上传的文件的名称-不包含扩展名
var selectedFileName = selectedFile.name.substring(0, selectedFile.name.lastIndexOf('.'));
// 获取上传文件的扩展名：可以对上传文件的类型做进一步判断
var suffix = inputFile.name.substring(inputFile.name.lastIndexOf('.'));
1.2 利用文件上传控件的change事件读取
实现代码如下：界面html代码同上。
$(document).ready(function () {
$('#jsonFileUpload').change(function () {
var selectedFile = this.files[0];
//后面的代码同上
});
})
// 或者下面的写法：触发该事件的目标空间
$(document).ready(function () {
$("#jsonFileUpload").change(function (evt) {
var selectedFile = evt.target.files[0];
//后面的代码同上
});
})
对比下上一节读取文件的写法：
var selectedFile = $('#jsonFileUpload')[0].files[0];
// 等同于下面的写法 ，注意：原生写法不要加 #
var selectedFile = document.getElementById('jsonFileUpload').files[0];
2 将读取的JSON对象转为Excel本地文件
这里用到的第三方库地址：https://github.com/cuikangjie/js-export-excel，除了本节的例子外，其他例子可以参考该网址做进一步学习。
引入的js文件地址：https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js，由于这个链接需要梯子，我这里特意上传到csdn，免积分下载哈，地址：https://download.csdn.net/download/lovewhoilove/20909491。
实现代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Convert Json To Excel</title>
</head>
<body>
<input type="file" id="jsonFileUpload" accept=".json"><br><br>
<input id="convert" type="button" value="处理">
<script type="text/javascript" src="js/jquery-3.6.0.slim.min.js"></script>
<script type="text/javascript" src="js/JsonExportExcel.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#convert').click(function () {
// 示例数据
var jsonObjArray = [
{
"name": "北京市xxxxxxxxxx",
"province": "北京市",
"city": "北京市",
"county": "xxx区"
},
{
"name": "上海市xxxxxxxxxx",
"province": "上海市",
"city": "上海市",
"county": "xxx区"
},
{
"name": "广州市xxxxxxxxxx",
"province": "广东省",
"city": "广州市",
"county": "xxx区"
}
];
var option = {};
option.datas = [{
sheetData: jsonObjArray,
sheetName: 'sheet',
sheetHeader: ['name', 'province', 'city', 'county']
}];
var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
});
})
</script>
</body>
</html>
转换结果如下：
3 读取Excel并解析后保存为JSON本地文件
这里用到的第三方库地址：https://github.com/SheetJS/sheetjs。
第三方库文件下载地址：https://github.com/SheetJS/sheetjs/blob/master/dist/xlsx.full.min.js。
本节内容参考文章：使用JavaScript将Excel转换为JSON，然后稍作改动，并增加保存为JSON本地文件的功能。
实现代码如下：
注意：当JSON对象的属性名（类似于键值对的键，js里不叫key哈）为数值时，我们在为其赋值时，要用
[]的形式为其赋值，用.会发生错误。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Convert Excel To Json</title>
</head>
<body>
<input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx"/>
<br><br>
JSON : <label id="jsonObject"> </label>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/xlsx.full.min.js"></script>
<script>
$(document).ready(function () {
$("#fileUploader").change(function (evt) {
var selectedFile = evt.target.files[0];
var selectedFileName = selectedFile.name.substring(0, selectedFile.name.lastIndexOf('.'));
var reader = new FileReader();
reader.onload = function (event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function (sheetName) {
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if (XL_row_object.length > 0) {
//解析JSON
var newJsonObj = {};
for (var i = 0; i < XL_row_object.length; i++) {
var obj = XL_row_object[i];
var key = obj.要作为key的字段名;
//这里我们将某一列作为key，在组建新的对象前将其删除，并将新对象作为value
delete key;
newJsonObj[key] = obj;
$("#jsonObject").text(JSON.stringify(newJsonObj));
}
var content = JSON.stringify(newJsonObj);
/**
* 将解析的json字符串保存至本地文件中
*/
var eleLink = document.createElement('a');
eleLink.download = selectedFileName + ".json";
eleLink.style.display = 'none';
// 字符内容转变成blob地址
var blob = new Blob([content]);
eleLink.href = URL.createObjectURL(blob);
// 触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
})
};
reader.onerror = function (event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsBinaryString(selectedFile);
});
});
</script>
</body>
4 利用回调函数来控制执行顺序
一种被作为实参传入另一个函数，并在该外部函数内被调用的函数，我们称之为回调函数（callback function）。
回调函数又分为2种调用方式：同步回调和异步回调：
- 同步回调：若回调函数是在外部函数执行后立即执行的，这便是同步回调。
- 异步回调：若在执行完成一个异步完成后才执行回调函数，则为异步回调。
4.1 同步回调
关于同步回调，MDN官网有个例子（详见回调函数），我做了修改，具体如下所示：我们在跟人打招呼之前，先要询问别人名字，即先执行询问，然后再打招呼。
function greeting(name) {
alert('Hello ' + name);
}
function ask(callback) {
alert('你叫什么名字？ ');
var name = prompt('请输入你的名字');
callback(name);
}
ask(greeting);
4.2 异步回调
我们先来MDN官网的获取地理位置的一个例子：
关于异步操作的详细内容请参考JavaScript中的异步操作-学习笔记一文的总结。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>获取地理位置</title>
</head>
<body>
<script type="text/javascript">
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
};
function success(pos) {
var crd = pos.coords;
console.log('Your current position is:');
console.log('Latitude : ' + crd.latitude);
console.log('Longitude: ' + crd.longitude);
console.log('More or less ' + crd.accuracy + ' meters.');
}
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
}
navigator.geolocation.getCurrentPosition(success, error, options);
</script>
</body>
</html>
运行结果如下：首先询问是否允许获取位置，点击【允许】即可。
控制台输出如下：表明获取到了地理位置，并且在获取地理位置后执行了success函数。
我们再来看一个使用场景：我们同时读取两个文件，我们需要利用两个文件中的某些属性值做进一步的判断或处理。
按照顺序执行的原理，正常情况下：我们会首先读取其中的一个文件，然后在读取该文件并提取出有用的属性后，然后再读取第二个文件，然后继续提取有用的属性，最后结合提取到的两部分属性值做进一步处理。
这样的实现方法存在一个问题：读取文件的操作作为异步操作，我们无法知道两次读写什么时候结束，假如迟迟没有读取完第二个文件的内容，但是第一个文件已经读取完毕，这样我们有可能拿到的第二文件的属性值是空值。
解决方法便是使用回调函数来解决：
示例代码如下：我们会先执行readOneFile函数，然后执行readAnotherFile函数，这样就可以在完成第一个文件的读取之后才开始读取另一个文件。
function readOneFile(callback) {
var inputOneFile = $('#fileOneInput')[0].files[0];
var reader = new FileReader();
reader.readAsText(inputOneFile, 'UTF-8');
reader.onload = function (evt) {
var oneString = evt.target.result;
var oneJsonObj = JSON.parse(oneString);
callback(oneJsonObj);
}
}
function readAnotherFile(callback) {
var inputAnotherFile = $('#fileAnotherInput')[0].files[0];
var reader = new FileReader();
reader.readAsText(inputAnotherFile, 'UTF-8');
reader.onload = function (evt) {
var fileAnotherString = evt.target.result;
var anotherJsonObj = JSON.parse(fileAnotherString);
callback(anotherJsonObj);
};
}
function init() {
readOneFile(function (oneJsonObj) {
readAnotherFile(function (anotherJsonObj) {
console.log(oneJsonObj);
console.log(anotherJsonObj);
//进一步的处理，这里省略
})
})
}
$('#btn').click(function () {
init();
});
4919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
