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
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.