Javascript XLSX.js Library Example to Read & Export Excel Sheets to HTML5 Table in Browser

Welcome folks today in this blog post we will be reading excel sheets and display it inside bootstrap table in browser using xlsx.js library. All the full source code of the application is shown below.

Get Started

In order to get started you need to include the cdn of the xlsx.js library as shown below inside the index.html file

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel Sheets to HTML Table</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.5/xlsx.full.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <input type="file" id="file-input" accept=".xlsx">
        <table class="table table-bordered" id="table">
            <!-- table rows and columns will be added here dynamically -->
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Excel Sheets to HTML Table</title>

</head>

<body>

</table>

</div>

</body>

</html>

As you can see we have also imported the bootstrap css cdn as well and then inside the html we have the simple input field where we allow the users to only upload the excel files by providing a accept attribute where we only accept the .xlsx extensions of the files. And then we have the table tag where we will be displaying the result of the excel file and we have attached some bootstrap classes to the table.

Now we need to add the javascript code required for this application. Just create a script.js file and copy paste the below code to it

script.js

const fileInput = document.getElementById('file-input');
const table = document.getElementById('table');

1 2	const fileInput = document.getElementById('file-input'); const table = document.getElementById('table');

As you can see we are getting the references of the dom elements which includes the input field and the table. We are getting the references using their id.

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    table.innerHTML = '';
    const data = event.target.result;
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const rows = XLSX.utils.sheet_to_json(worksheet);

    for (const row of rows) {
      const tr = document.createElement('tr');
      for (const key in row) {
        const td = document.createElement('td');
        td.innerHTML = row[key];
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
  };

  reader.readAsArrayBuffer(file);
});

fileInput.addEventListener('change', () => {

const file = fileInput.files[0];

const reader = new FileReader();

reader.onload = (event) => {

table.innerHTML = '';

const data = event.target.result;

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

const firstSheetName = workbook.SheetNames[0];

const worksheet = workbook.Sheets[firstSheetName];

const rows = XLSX.utils.sheet_to_json(worksheet);

for (const row of rows) {

const tr = document.createElement('tr');

for (const key in row) {

const td = document.createElement('td');

td.innerHTML = row[key];

tr.appendChild(td);

}

table.appendChild(tr);

}

};

reader.readAsArrayBuffer(file);

});

As you can see we have attached the onchange event listener to the input field such that when the file is changed or selected by the user then we are making use of the xlsx.js library and using the read() method to load the excel file and then we are using the sheets_to_json() method to convert the excel sheets to json and we are creating the dynamic table rows and columns and for this we are using the foreach loop to iterate over all the rows and columns which are present inside the excel file. And lastly we are adding the tr to the table tag using the appendChild() method.

Now if you open the index.html file inside the browser and select an excel file you will see the contents displayed inside the html5 table as shown below

Full Source Code