Read (Parse) Excel File (XLS and XLSX) from local Folder (Directory) using JavaScript

Sumeet
 
on Dec 02, 2020 10:18 PM
3881 Views

I am using below article.

Read (Parse) Excel File (XLS and XLSX) using JavaScript

In this article Excel file is asking for upload then it's reading content from excel.

But in my project I have created folder ExcelFiles at root, excel file always be kept inside ExcelFiles folder. From that path I have to read all the contents available.

Is it feasible (If yes, kindly show me example or reference.)

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 03, 2020 05:18 AM

Hi Sumeet,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input type="button" id="upload" value="Display" onclick="Display()" />
    <hr />
    <div id="dvExcel"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
    <script type="text/javascript">
        function Display() {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/ExcelFiles/Sample.xlsx", true);
            xhr.responseType = "blob";
            xhr.onload = function (e) {
                var file = this.response;
                var reader = new FileReader();
                //For Browsers other than IE.
                if (reader.readAsBinaryString) {
                    reader.onload = function (e) {
                        ProcessExcel(e.target.result);
                    };
                    reader.readAsBinaryString(file);
                } 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]);
                        }
                        ProcessExcel(data);
                    };
                    reader.readAsArrayBuffer(file);
                }
            };
            xhr.send();
        };
        function ProcessExcel(data) {
            //Read the Excel File data.
            var workbook = XLSX.read(data, {
                type: 'binary'
            });

            //Fetch the name of First Sheet.
            var firstSheet = workbook.SheetNames[0];

            //Read all rows from First Sheet into an JSON array.
            var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);

            //Create a HTML Table element.
            var table = document.createElement("table");
            table.border = "1";

            //Add the header row.
            var row = table.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);

            //Add the data rows from Excel file.
            for (var i = 0; i < excelRows.length; i++) {
                //Add the data row.
                var row = table.insertRow(-1);

                //Add the data cells.
                var cell = row.insertCell(-1);
                cell.innerHTML = excelRows[i].Id;

                cell = row.insertCell(-1);
                cell.innerHTML = excelRows[i].Name;

                cell = row.insertCell(-1);
                cell.innerHTML = excelRows[i].Country;
            }

            var dvExcel = document.getElementById("dvExcel");
            dvExcel.innerHTML = "";
            dvExcel.appendChild(table);
        };
    </script>
</body>
</html>

Screenshot