实现代码如下:
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Read Jsontitle>
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('.'));
实现代码如下:界面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];
这里用到的第三方库地址: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 Exceltitle>
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>
这里用到的第三方库地址: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 Jsontitle>
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>
一种被作为实参传入另一个函数,并在该外部函数内被调用的函数,我们称之为回调函数(callback function)。
回调函数又分为2种调用方式:同步回调和异步回调:
关于同步回调,MDN官网有个例子(详见回调函数),我做了修改,具体如下所示:我们在跟人打招呼之前,先要询问别人名字,即先执行询问,然后再打招呼。
function greeting(name) {
alert('Hello ' + name);
}
function ask(callback) {
alert('你叫什么名字? ');
var name = prompt('请输入你的名字');
callback(name);
}
ask(greeting);
我们先来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();
});