How to convert Excel to JSON using JavaScript

Today in this blog you’ll learn how to convert Excel to JSON using JavaScript. You can convert any Excel file to JSON data using JavaScript.

How to Convert Excel to JSON using JavaScript [Source Codes]

This source code can help you to Convert Excel to JSON using JavaScript
JavaScript Plug-In source

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">

	<div class="input_file">
		<input type="file" name="" id="UpExcel">
		Upload Excel
	</div>

	<text id="ShowJSON"></text>

	<button id="DownJSON">Download JSON</button>	

</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #0fb9a9;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}


.container{
	width: 800px;
	text-align: center;
}
.input_file{
	width: 250px;
	height: 50px;
	border-radius: 25px;
	margin:0 auto 20px;
	position: relative;
	background-color: black;
	line-height: 50px;
	text-align: center;
	font-weight: 700;
	color: #fff;
	font-size: 20px;
}
.input_file input{
	opacity: 0;
	width: 100%;
	height: 100%;
	margin:0;
	position: absolute;
	left: 0;
	top: 0;

}
textarea{
	width: 100%;
	height: 300px;
	border:5px solid #000;
	margin:0 0 20px;
	font-size: 20px;
	font-family: arial
}
button{
	width: 250px;
	height: 50px;
	border-radius: 25px;
	margin:0 auto 20px;
	position: relative;
	background-color: black;
	line-height: 50px;
	text-align: center;
	font-weight: 700;
	color: #fff;
	border:0;
	font-size: 20px;
}

JavaScript Code

Copy

document.getElementById('UpExcel').onchange = function(event) {
	xx = event.target.files[0]
	//console.log(xx);
	if(xx){
		var fileReader = new FileReader();
		fileReader.readAsBinaryString(xx);
		fileReader.onload = function(event){
			//console.log(event.target.result)
			var xlData = event.target.result;
			var showData = XLSX.read(xlData,{type:"binary"})
			console.log(showData);
			showData.SheetNames.forEach( sheet=> {
				// statements
				var rowObject = XLSX.utils.sheet_to_row_object_array(showData.Sheets[sheet])
				//console.log(rowObject)
				document.getElementById('ShowJSON').value=JSON.stringify(rowObject, null, 2)
			});
		}
	}

}
//console.log(XLSX)
document.getElementById("DownJSON").onclick = function(){
	var sjonStr = document.getElementById('ShowJSON').value;
	DownloadJSONFun(sjonStr,'excel_to_json')
}

function DownloadJSONFun(str,filename){
	var data_str = "data:text/json;charset=utf-8," + encodeURIComponent(str);
	var anchor = document.createElement('a');
	anchor.setAttribute('href', data_str)
	anchor.setAttribute('download', filename+".json");
	document.body.appendChild(anchor);
	anchor.click()
	anchor.remove()

}