Excel to JSON

Converter Excel to JSON

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>

<body>
	<div class="fluig-style-guide">
		<form name="form" role="form">

			<h2>Choose an excel file to upload</h2>
			<div class="upload">
				<input type="button" class="uploadButton" value="Browse" />
				<input type="file" id="fileUpload" name="myfile" onchange="checkfile(this)" />
				<span class="fileName">Select file..</span>
			</div>
			<hr />
			<a download="info.json" id="downloadFile" style="display: none">Download</a>
			<pre id="respostaJSON"></pre>






		</form>
	</div>
</body>

CSS

div.upload {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            display: inline-block;
            height: 30px;
            padding: 3px 40px 3px 3px;
            position: relative;
            width: auto;
        }
            div.upload:hover {
                opacity: 0.95;
            }
            div.upload input[type="file"] {
                width: 100%;
                height: 30px;
                opacity: 0;
                cursor: pointer;
                position: absolute;
                left: 0;
            }
        .uploadButton {
            background-color: #035369;
            border: none;
            border-radius: 3px;
            color: #FFF;
            cursor: pointer;
            display: inline-block;
            height: 30px;
            margin-right: 15px;
            width: auto;
            padding: 0 20px;
            box-sizing: content-box;
        }
        .fileName {
            font-family: Arial;
            font-size: 14px;
        }
        .upload + .uploadButton {
            height: 38px;
        }
        #downloadFile {
            display: inline-block;
            padding: 10px 20px;
            font-size: 15px;
            background: #035369;
            color: #fff;
            border: none;
            cursor: pointer;
            text-decoration: none;
        }

JavaScript

var excelRows = [];

function checkfile(sender) {
    var validExts = new Array(".xlsx");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
        alert("Invalid file selected, valid files are of " + validExts.toString() + " types.");
        return false;
    }
    else
        processExcel();
}


function processExcel() {
    var fileUpload = document.getElementById("fileUpload");
    if (typeof (FileReader) != "undefined") {
        var reader = new FileReader();
        //For Browsers other than IE.
        if (reader.readAsBinaryString) {
            reader.onload = function (e) {
                readExcel(e.target.result);
            };
            reader.readAsBinaryString(fileUpload.files[0]);
        } else {
            //For IE Browser.
            reader.onload = function (e) {
                var data = "";
                var bytes = new Uint8Array(e.target.result);
                for (var i = 0; i < bytes.byteLength; i++) {
                    data += String.fromCharCode(bytes[i]);
                }
                readExcel(data);
            };
            reader.readAsArrayBuffer(fileUpload.files[0]);
        }
    } else {
        alert("This browser does not support HTML5.");
    }
};


function readExcel(data) {
    var workbook = XLSX.read(data, {
        type: 'binary'
    });
    var firstSheet = workbook.SheetNames[0];
    excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
    var link = document.getElementById('downloadFile');
    link.href = generateJsonFile(JSON.stringify(excelRows));
    console.log(JSON.stringify(excelRows))
    $("#respostaJSON").html(JSON.stringify(excelRows))
    link.style.display = 'inline-block';
}


function generateJsonFile(json) {
    var jsonFile = null;
    var data = new Blob([json], { type: 'text/json' });
    if (jsonFile !== null) {
        window.URL.revokeObjectURL(jsonFile);
    }
   ...