Javascript ExcelJS Example to Export HTML5 Table to Excel File and Download it as Attachment in Browser

Welcome folks today in this blog post we will be using the exceljs library to export the html5 table to excel file and download it as attachment in browser. 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 file and copy paste the following code

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>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>25</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>30</td>
                <td>jane@example.com</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>40</td>
                <td>bob@example.com</td>
            </tr>
        </tbody>
    </table>

    <button onclick="exportToExcel()">Export to Excel</button>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<thead>

<tr>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>john@example.com</td>

</tr>

<tr>

<td>jane@example.com</td>

</tr>

<tr>

<td>bob@example.com</td>

</tr>

</tbody>

</table>

<button onclick="exportToExcel()">Export to Excel</button>

</body>

</html>

As you can see we are including the exceljs cdn and filesaver.js library cdn and then we have defined the above html5 table where we have three columns and now we have the button to export the html5 table to excel file and download it as attachment.

script.js

function exportToExcel() {
        // Get the HTML table element
        const htmlTable = document.getElementById('myTable');

        // Create a new workbook and worksheet using ExcelJS
        const workbook = new ExcelJS.Workbook();
        const worksheet = workbook.addWorksheet('Sheet1');

        // Add the column names to the worksheet
        const headerRow = worksheet.addRow([]);
        const headerCells = htmlTable.getElementsByTagName('th');
        for (let i = 0; i < headerCells.length; i++) {
            headerRow.getCell(i + 1).value = headerCells[i].innerText;
        }

        // Add the HTML table data to the worksheet
        const rows = htmlTable.getElementsByTagName('tr');
        for (let i = 0; i < rows.length; i++) {
            const cells = rows[i].getElementsByTagName('td');
            const rowData = [];
            for (let j = 0; j < cells.length; j++) {
                rowData.push(cells[j].innerText);
            }
            worksheet.addRow(rowData);
        }

        // Generate a blob object from the workbook and download it as an attachment
        workbook.xlsx.writeBuffer().then(function (buffer) {
            const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            saveAs(blob, 'table.xlsx');
        });
    }

function exportToExcel() {

// Get the HTML table element

const htmlTable = document.getElementById('myTable');

// Create a new workbook and worksheet using ExcelJS

const workbook = new ExcelJS.Workbook();

const worksheet = workbook.addWorksheet('Sheet1');

// Add the column names to the worksheet

const headerRow = worksheet.addRow([]);

const headerCells = htmlTable.getElementsByTagName('th');

for (let i = 0; i < headerCells.length; i++) {

headerRow.getCell(i + 1).value = headerCells[i].innerText;

}

// Add the HTML table data to the worksheet

const rows = htmlTable.getElementsByTagName('tr');

for (let i = 0; i < rows.length; i++) {

const cells = rows[i].getElementsByTagName('td');

const rowData = [];

for (let j = 0; j < cells.length; j++) {

rowData.push(cells[j].innerText);

}

worksheet.addRow(rowData);

}

// Generate a blob object from the workbook and download it as an attachment

workbook.xlsx.writeBuffer().then(function (buffer) {

const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

saveAs(blob, 'table.xlsx');

});

}

As you can see we are making a new excel workbook using the exceljs library and then we are creating a new worksheet named as Sheet1 and inside it we are inserting the values of the html5 table using the for loop and then we are saving the excel file as an attachment using the filesaver.js library using the buffer.