Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on March 23, 2023

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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>

 

 

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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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.

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme