Javascript Project to Read Excel Files in Browser and Display it inside Bootstrap Table Using read-excel-file Library

Welcome folks today in this blog post we will be reading excel files and display it inside bootstrap table in browser using read-excel-file 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 read-excel-file 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>Document</title>
    <script src="https://unpkg.com/read-excel-file@4.x/bundle/read-excel-file.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-striped" id="excel-table">
            <!-- table rows and columns will be added here dynamically -->
        </table>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</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 input = document.getElementById('file-input');
 const table = document.getElementById('excel-table');

1 2	const input = document.getElementById('file-input'); const table = document.getElementById('excel-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.

input.addEventListener('change', (event) => {
        const file = event.target.files[0];

        readXlsxFile(file).then((rows) => {
            // Clear the table
            table.innerHTML = '';

            // Add the rows to the table
            rows.forEach((row) => {
                const tr = document.createElement('tr');
                row.forEach((cell) => {
                    const td = document.createElement('td');
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                table.appendChild(tr);
            });
        });
    });

input.addEventListener('change', (event) => {

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

readXlsxFile(file).then((rows) => {

// Clear the table

table.innerHTML = '';

// Add the rows to the table

rows.forEach((row) => {

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

row.forEach((cell) => {

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

td.textContent = cell;

tr.appendChild(td);

});

table.appendChild(tr);

});

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 read-excel-file library and using the readXlsxFile() method to load the excel file and then it returns the promise and inside it 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