JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="uploadProcess()" />
<br />
<div id="ExcelTable"></div>
<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>
<script>
function uploadProcess() {
// Reference the FileUpload element.
var fileUpload = document.getElementById('fileUpload')
var file = fileUpload.files[0]
//Validate whether File is valid Excel file.
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
if (regex.test(file.name.toLowerCase())) {
file.arrayBuffer().then(getTableFromExcel)
GetTableFromExcel(e.target.result);
} else {
alert("Please upload a valid Excel file.");
}
}
/**
* @params {ArrayBuffer} data
*/
function getTableFromExcel(data) {
// Read the Excel File data in binary
var workbook = XLSX.read(new Uint8Array(data), {
type: 'array'
})
// get the name of First Sheet.
var Sheet = workbook.SheetNames[0]
// Read all rows from First Sheet into an JSON array.
var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);
//Create a HTML Table element.
var myTable = document.createElement("table");
myTable.border = "1";
//Add the header row.
var row = myTable.insertRow(-1);
//Add the header cells.
var headerCell = document.createElement("th");
headerCell.innerHTML = "Id";
row.appendChild(headerCell);
headerCell = document.createElement("th");
headerCell.innerHTML = "Name";
row.appendChild(headerCell);
headerCell = document.createElement("th");
headerCell.innerHTML = "Country";
row.appendChild(headerCell);
headerCell = document.createElement("th");
headerCell.innerHTML = "Age";
...