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
Show read more link if the text exceeds a certain length using jQuery
Use the JavaScript substring() ...
How to check whether a value is numeric or not in jQuery
Use the jQuery.isNumeric() method You...
How To Install Bitcoin Core In Ubuntu
Today, we are share with you how to inst...
JWT - Authentication API in Laravel7
This is a comprehensive Laravel 7 JWT Au...
How to integrate paypal payment gateway in laravel 5.4
Hello, today laravelcode share with you...