Today, I will share with you a very small but more helpful tutorial about how to convert excel file data into a JSON object in javascript. you can be done it by xlsx.full.min.js a library of javascript. sometimes we need to upload to excel file and import data to a database. most of the applications done this functionality from the backend side or server-side. but if you want user side done then we can be done it using javascript.
Create index.php file
Simply write the above code in your PHP file and you can be done it.
<!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>Document</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) {
console.log("Hi...");
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 hope you like this article.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
Laravel 8 - Encrypted and Decrypted Data using openssl_encrypt
In this article, I will share with you h...
How to check or uncheck a checkbox dynamically using jQuery
Use the jQuery prop() method You can...
How to Remove a Property from a JavaScript Object
Use the delete Operator You...
How to Check If an Object Property is Undefined in JavaScript
Use the strict equality operator (===)...
This Cache Store does not Support Tagging in Laravel
In this article, I will share with you a...