How To Read Excel Format Data In Javascript

In this article I will explain with an example, how to read and parse Excel file (XLS and XLSX) using JavaScript.

One time File is selected in FileUpload control, it is read as Binary information so the Binary data is read using the xlsx Excel plugin.

The read data from Excel file is displayed in HTML Table using JavaScript.

The HTML Markup consists of a FileUpload control (HTML File Input) and a HTML Button.

< input type ="file" id ="fileUpload" />

< input type ="button" id ="upload" value ="Upload" onclick ="Upload()" />

< 60 minutes />

< div id ="dvExcel"></ div >

Reading (Parsing) Excel File (XLS and XLSX) and displaying data in HTML Table using JavaScript

When the Excel file is selected in FileUpload control (HTML File Input) and Upload push is clicked, the Upload JavaScript function is being chosen.

Inside the function, first a check is performed to verify whether the file is a valid Excel file i.e. file with extension XLS or XLSX. Then a check is performed to make sure whether the browser supports HTML5 FileReader API.

The Excel file is read as Binary data using HTML5 FileReader then the Binary information is read using the xlsx Excel plugin which returns rows from Excel in JSON Assortment format.

< script blazon ="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.xiii.5/xlsx.full.min.js"></ script >

< script type ="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.v/jszip.js"></ script >

< script blazon ="text/javascript">

part Upload() {

//Reference the FileUpload element.

var fileUpload = certificate.getElementById("fileUpload");

//Validate whether File is valid Excel file.

var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;

if (regex.examination(fileUpload.value.toLowerCase())) {

if (typeof (FileReader) != "undefined") {

var reader = new FileReader();

//For Browsers other than IE.

if (reader.readAsBinaryString) {

                    reader.onload = function (e) {

                        ProcessExcel(east.target.consequence);

                    };

                    reader.readAsBinaryString(fileUpload.files[0]);

                } else {

//For IE Browser.

                    reader.onload = role (e) {

var information = "";

var bytes = new Uint8Array(due east.target.result);

for (var i = 0; i < bytes.byteLength; i++) {

                            information += String.fromCharCode(bytes[i]);

                        }

                        ProcessExcel(data);

                    };

                    reader.readAsArrayBuffer(fileUpload.files[0]);

                }

            } else {

                warning("This browser does not back up HTML5.");

            }

        } else {

            alert("Please upload a valid Excel file.");

        }

    };

function ProcessExcel(information) {

//Read the Excel File data.

var workbook = XLSX.read(information, {

            type: 'binary'

        });

//Fetch the name of First Sheet.

var firstSheet = workbook.SheetNames[0];

//Read all rows from Commencement Sail into an JSON array.

var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);

//Create a HTML Table chemical element.

var table = document.createElement("table");

        table.border = "1";

//Add together the header row.

var row = table.insertRow(-i);

//Add together 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);

//Add the information rows from Excel file.

for (var i = 0; i < excelRows.length; i++) {

//Add together the data row.

var row = table.insertRow(-1);

//Add together the data cells.

var prison cell = row.insertCell(-1);

            jail cell.innerHTML = excelRows[i].Id;

            cell = row.insertCell(-1);

            prison cell.innerHTML = excelRows[i].Proper noun;

            cell = row.insertCell(-i);

            jail cell.innerHTML = excelRows[i].Country;

        }

var dvExcel = document.getElementById("dvExcel");

        dvExcel.innerHTML = "";

        dvExcel.appendChild(table);

    };

</ script >

Browser Compatibility

The above code has been tested in the post-obit browsers simply in versions that support HTML5.

* All browser logos displayed above are property of their respective owners.

How To Read Excel Format Data In Javascript,

Source: https://www.aspsnippets.com/Articles/Read-Parse-Excel-File-XLS-and-XLSX-using-JavaScript.aspx

Posted by: dupreysomighten.blogspot.com

Share this post