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官網的獲取地理位置的一個例子：
<!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();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292745.html
標籤：其他