Javascript XLSX.js Example to Export All Sheets of Excel File and Download it as CSV File in Browser

Welcome folks today in this blog post we will be using the xlsx.js library to export all sheets of excel file and download it as csv file in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html and include the below code as shown below

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Excel to CSV Converter</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

</head>
<body>
<div class="container">
    <div class="form-group">
        <input type="file" class="form-control" required id="fileInput" accept=".xlsx">
    </div>
  <table class="table table-striped" id="sheetTable"></table>
</div>

  <script>
    // get file input element
    const fileInput = document.getElementById('fileInput');

    // add event listener to file input
    fileInput.addEventListener('change', function(e) {
      const file = e.target.files[0];

      // read file with FileReader
      const reader = new FileReader();
      reader.onload = function() {
        const data = new Uint8Array(this.result);
        const workbook = XLSX.read(data, {type: 'array'});

        // create table header
        const table = document.getElementById('sheetTable');
        const header = table.createTHead().insertRow();
        header.insertCell().appendChild(document.createTextNode('Sheet Name'));
        header.insertCell().appendChild(document.createTextNode('Download'));

        // create table rows for each sheet
        workbook.SheetNames.forEach(function(sheetName) {
          const row = table.insertRow();
          row.insertCell().appendChild(document.createTextNode(sheetName));
          const downloadButton = document.createElement('button');
          downloadButton.textContent = 'Download';
          downloadButton.addEventListener('click', function() {
            // convert sheet to CSV and download
            const csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
            const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
            const link = document.createElement('a');
            link.download = sheetName + '.csv';
            link.href = URL.createObjectURL(blob);
            link.click();
          });
          row.insertCell().appendChild(downloadButton);
        });
      };
      reader.readAsArrayBuffer(file);
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Excel to CSV Converter</title>

</head>

<body>

</div>

</div>

// get file input element

const fileInput = document.getElementById('fileInput');

// add event listener to file input

fileInput.addEventListener('change', function(e) {

const file = e.target.files[0];

// read file with FileReader

const reader = new FileReader();

reader.onload = function() {

const data = new Uint8Array(this.result);

const workbook = XLSX.read(data, {type: 'array'});

// create table header

const table = document.getElementById('sheetTable');

const header = table.createTHead().insertRow();

header.insertCell().appendChild(document.createTextNode('Sheet Name'));

header.insertCell().appendChild(document.createTextNode('Download'));

// create table rows for each sheet

workbook.SheetNames.forEach(function(sheetName) {

const row = table.insertRow();

row.insertCell().appendChild(document.createTextNode(sheetName));

const downloadButton = document.createElement('button');

downloadButton.textContent = 'Download';

downloadButton.addEventListener('click', function() {

// convert sheet to CSV and download

const csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);

const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});

const link = document.createElement('a');

link.download = sheetName + '.csv';

link.href = URL.createObjectURL(blob);

link.click();

});

row.insertCell().appendChild(downloadButton);

});

};

reader.readAsArrayBuffer(file);

});

</script>

</body>

</html>