How to Convert Excel File into JSON in Javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>How to Convert Excel File into JSON in Javascript</title>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.3/xlsx.full.min.js"
></script>
</head>
<body>
<input type="file" id="fileUpload" accept=".xls,.xlsx" /><br />
<button type="button" id="uploadExcel">Convert</button>
<pre id="jsonData"></pre>
</body>
<script>
var selectedFile;
document
.getElementById("fileUpload")
.addEventListener("change", function(event) {
selectedFile = event.target.files[0];
});
document
.getElementById("uploadExcel")
.addEventListener("click", function() {
if (selectedFile) {
var fileReader = new FileReader();
fileReader.onload = function(event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: "binary"
});
workbook.SheetNames.forEach(sheet => {
let rowObject = XLSX.utils.sheet_to_row_object_array(
workbook.Sheets[sheet]
);
let jsonObject = JSON.stringify(rowObject);
document.getElementById("jsonData").innerHTML = jsonObject;
console.log(jsonObject);
});
};
fileReader.readAsBinaryString(selectedFile);
}
});
</script>
</html>

--

--

--

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Validate Phone Number Using Jquery Input Mask

How To Validate Phone Number Using JQuery Input Mask

Vue 3 lifecycle hooks with real-time example

Vue 3 lifecycle hooks with real-time example

Provisioning lambda + cloudwatch monitoring using terraform

5 Tips for Sharing code between NuxtJS Projects

This Week I Learned: JQuery and Ajax

Marble.js 2.0 🔥 — reactive, better, functional, stronger

How to deep copy an array in Javascript

Quiztime — Random OSINT Challenge 6

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Websolutionstuff

Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.

More from Medium

Vue.js App to get random facts about Cats | For Beginners

Read Excel File in JSON Format Using Nodejs

Getting started with VS Code

Build CRUD on RESTful API with MongoDB — Javascript, Part2— Setup the project.