Open In App

How to Convert HTML Table into Excel Spreadsheet using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how we can convert an HTML table into an Excel spreadsheet using jQuery. There are two ways available in jQuery to accomplish this task as discussed below:

Approach 1: Using the jQuery table2excel plugin

A simple jQuery plugin ‘table2excel’ can be used for converting an HTML table to an Excel sheet. You need to add the below CDN link of the table2excel plugin into your HTML document to use it.

CDN Link:

<!-- table2excel plugin CDN -->
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
</script>

Syntax:

$("#table-id").table2excel({
filename: "excel_sheet-name.xls"
});

Example: The below example will explain the use of the table2excel jQuery plugin to convert an HTML table into an Excel sheet.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width,
          initial-scale=1.0">
    <title>Table to Excel</title>
    <!-- jQuery CDN -->
    <script src=
    </script>
    <!-- table2excel jQuery plugin CDN -->
    <script src=
"//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
    </script>
    <style>
        #dwnldBtn{
            background-color: green;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 5px;
            margin: 2rem 0;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <center>
        <table id="dataTable" border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12345</td>
                    <td>Samyuj Kumar</td>
                    <td>samyuj@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>12346</td>
                    <td>Sanjay Dhillon</td>
                    <td>SDhillon@example.com</td>
                    <td>012-345-6789</td>
                </tr>
                <tr>
                    <td>12347</td>
                    <td>Johan Greg</td>
                    <td>gregJo@example.com</td>
                    <td>987-654-3210</td>
                </tr>
            </tbody>
        </table>
 
        <button id="dwnldBtn">
                Download Excel Sheet
        </button>
    </center>
    <script>
        $(document).ready(function () {
            $('#dwnldBtn').on('click', function () {
                $("#dataTable").table2excel({
                    filename: "employeeData.xls"
                });
            });
        });
    </script>
 
</body>
 
</html>


Output:

excelSheetGIF

In this method, a link can be generated to download the file in the excel format which converts the HTML table into excel sheet.

Example: The below example will explain how you can create a download link in the excel format using jQuery.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width,
          initial-scale=1.0">
    <title>Table to Excel</title>
    <!-- jQuery CDN -->
    <script src=
    </script>
    <style>
        #dwnldBtn{
            background-color: green;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 5px;
            margin: 2rem 0;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <center>
        <table id="dataTable" border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12345</td>
                    <td>Samyuj Kumar</td>
                    <td>samyuj@example.com</td>
                    <td>123-456-7890</td>
                </tr>
                <tr>
                    <td>12346</td>
                    <td>Sanjay Dhillon</td>
                    <td>SDhillon@example.com</td>
                    <td>012-345-6789</td>
                </tr>
                <tr>
                    <td>12347</td>
                    <td>Johan Greg</td>
                    <td>gregJo@example.com</td>
                    <td>987-654-3210</td>
                </tr>
            </tbody>
        </table>
 
        <button id="dwnldBtn">
                Download Excel Sheet
        </button>
    </center>
    <script>
        $(document).ready(function () {
            $('#dwnldBtn').on('click', function () {
                downloadExcelTable('dataTable', 'employeeData');
            });
 
            function downloadExcelTable(tableID, filename = '') {
                const linkToDownloadFile = document.
                                           createElement("a");
                const fileType = 'application/vnd.ms-excel';
                const selectedTable = document.
                                      getElementById(tableID);
                const selectedTableHTML = selectedTable.outerHTML.
                                          replace(/ /g, '%20');
 
                filename = filename ? filename + '.xls' :
                           'excel_data.xls';
                document.body.appendChild(linkToDownloadFile);
 
                if (navigator.msSaveOrOpenBlob) {
                    const myBlob = new Blob(['\ufeff',
                                   selectedTableHTML], {
                        type: fileType
                    });
                    navigator.msSaveOrOpenBlob(myBlob, filename);
                } else {
                    // Create a link to download
                    // the excel the file
                    linkToDownloadFile.href = 'data:' + fileType +
                                               ', ' + selectedTableHTML;
 
                    // Setting the name of
                    // the downloaded file
                    linkToDownloadFile.download = filename;
 
                    // Clicking the download link
                    // on click to the button
                    linkToDownloadFile.click();
                }
            }
        });
    </script>
 
</body>
 
</html>


Output:

excelSheetGIF

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more“. 



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads