How to Parse Excel (Xls) File in Javascript/Html5

How to parse Excel (XLS) file in Javascript/HTML5

Below Function converts the Excel sheet (XLSX format) data to JSON. you can add promise to the function.

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script>
var ExcelToJSON = function() {

  this.parseExcel = function(file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var data = e.target.result;
      var workbook = XLSX.read(data, {
        type: 'binary'
      });

      workbook.SheetNames.forEach(function(sheetName) {
        // Here is your object
        var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        var json_object = JSON.stringify(XL_row_object);
        console.log(json_object);

      })

    };

    reader.onerror = function(ex) {
      console.log(ex);
    };

    reader.readAsBinaryString(file);
  };
};
</script>

Below post has the code for XLS format Excel to JSON javascript code?

Read a csv or excel (xlsx) file with just javascript and html?

I've added a simple example that accepts Excel or CSV files (current example accepts a single file), uses the SheetJS library to parse the Excel file type, convert the data to JSON and logs the contents to the console.

This should be more than enough to complete your demo. Hope this helps!

var file = document.getElementById('docpicker')var viewer = document.getElementById('dataviewer')file.addEventListener('change', importFile);
function importFile(evt) {  var f = evt.target.files[0];
  if (f) {    var r = new FileReader();    r.onload = e => {      var contents = processExcel(e.target.result);      console.log(contents)    }    r.readAsBinaryString(f);  } else {    console.log("Failed to load file");  }}
function processExcel(data) {  var workbook = XLSX.read(data, {    type: 'binary'  });
  var firstSheet = workbook.SheetNames[0];  var data = to_json(workbook);  return data};
function to_json(workbook) {  var result = {};  workbook.SheetNames.forEach(function(sheetName) {    var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {      header: 1    });    if (roa.length) result[sheetName] = roa;  });  return JSON.stringify(result, 2, 2);};

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script><label for="avatar">Choose an Excel or CSV file:</label><input type="file" id="docpicker" accept=".csv,application/vnd.ms-excel,.xlt,application/vnd.ms-excel,.xla,application/vnd.ms-excel,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xltx,application/vnd.openxmlformats-officedocument.spreadsheetml.template,.xlsm,application/vnd.ms-excel.sheet.macroEnabled.12,.xltm,application/vnd.ms-excel.template.macroEnabled.12,.xlam,application/vnd.ms-excel.addin.macroEnabled.12,.xlsb,application/vnd.ms-excel.sheet.binary.macroEnabled.12">
<div id="dataviewer">

Displaying data from excel spreadsheet on website - javscript or php+mysql?

This thread may help you:

How to parse Excel (XLS) file in Javascript/HTML5

Personally, I hate working with excel sheets and convert them to csv whenever I can. Then parse the csv and convert the rows to JSON format.

How to parse an excel file in JavaScript?

How would you load a file into JavaScript in the first place?

In addition, Excel is a proprietary format and complex enough that server side libraries with years in development (such as Apache POI) haven't yet managed to correctly 100% reverse engineer these Microsoft formats.

So I think that the answer is that you can't.

Update: That is in pure JavaScript.

Update 2: It is now possible to load files in JavaScript: https://developer.mozilla.org/en-US/docs/DOM/FileReader

How to Parse Excel (Xls) File in Javascript/Html5