<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Excel To JSON Converter</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar bg-light shadow">
<div class="container-fluid">
<div class="navbar-brand mb-0 h1">Excel To JSON</div>
</div>
</nav>
<div class="container rounded shadow border border-primary mt-3 mb-3 p-3">
<form>
<label for="file" class="mb-2">Select File</label>
<input
type="file"
id="file"
accept=".xls,.xlsx"
class="form-control mb-2"
/>
<label for="page" class="mb-2">Select Sheet</label>
<select id="page" class="form-control mb-2">
<option value="">Select Sheet</option>
</select>
<label for="result" class="mb-2">Result</label>
<textarea
id="result"
cols="30"
rows="10"
class="form-control mb-2"
></textarea>
<a href="" id="download" class="btn btn-primary">Download JSON</a>
</form>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"
integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script>
let file = document.querySelector("#file");
let page = document.querySelector("#page");
let result = document.querySelector("#result");
let download = document.querySelector("#download");
let allSheet;
file.addEventListener("change", () => {
file.files[0].arrayBuffer().then((buffer) => {
allSheet = XLSX.read(buffer);
let forSelect = allSheet.SheetNames.reduce((acum, cur) => {
return acum + `<option value="${cur}">${cur}</option>`;
}, "");
page.innerHTML = forSelect;
let jsonObj = XLSX.utils.sheet_to_json(allSheet.Sheets[page.value]);
let jsn = JSON.stringify({ data: jsonObj }, null, 4);
result.value = jsn;
download.href =
"data:application/json;charset=utf-8," +
encodeURIComponent(result.value);
download.download = page.value;
});
});
page.addEventListener("change", () => {
let jsonObj = XLSX.utils.sheet_to_json(allSheet.Sheets[page.value]);
let jsn = JSON.stringify({ data: jsonObj }, null, 4);
result.value = jsn;
download.href =
"data:application/json;charset=utf-8," +
encodeURIComponent(result.value);
download.download = page.value;
});
</script>
</body>
</html>
That's a brief overview of the code and how it works. Let me know if you have any questions or would like further clarification on any of the steps!