How to Convert HTML Table into Excel Spreadsheet using jQuery ? - GeeksforGeeks

03 Aug, 2021
Any HTML table that you have created can be converted into an Excel Spreadsheet by using jQuery and it is compatible with all browsers. There are two simple approaches that require basic HTML and jQuery knowledge to achieve this.
Approach 1: Using jQuery plugin: A simple jQuery plugin ‘table2excel’ can be used for converting an HTML table to an excel sheet.Syntax:$("#table-id").table2excel({
    filename: "excel_sheet-name.xls"
});Example:<table id="studtable">    <tr>        <th>ID</th>        <th>Name</th>        <th>Age</th>        <th>Address</th>    </tr>    <tr>        <td>101</td>        <td>Alex</td>        <td>15</td>        <td>Maldives</td>    </tr>    <tr>        <td>102</td>        <td>Chris</td>        <td>14</td>        <td>Canada</td>    </tr>          <tr>        <td>103</td>        <td>Jay</td>        <td>15</td>        <td>Toronto</td>    </tr>  </table>  <script>   $(document).ready(function () {    $("#studtable").table2excel({        filename: "Students.xls"    }); });  </script>Output: 
ID    Name    Age    Address
101    Alex    15    Maldives
102    Chris    14    Canada
103    Jay    15    TorontoThe above output gets converted into an Excel spreadsheet in the exact same manner the HTML table is.About ‘table2excel’: The ‘table2excel’ is a simple yet useful jQuery plugin that allows for exporting HTML table data to an Excel file. The ‘table2excel’ also has a feature to exclude cells that contain a specified class.Syntax for noExport:$(document).ready(function() {
    $("#table-id").table2excel({
        exclude: ".noExport",
        filename: "name-of-the-file",
    });
});Example code for excluding some specified cells:<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>  <button>Export</button><table>    <thead>        <tr>            <td class="noExport">                This cell will not be exported.            </td>            <td>                This cell will get exported.            </td>        </tr>    </thead>    <tbody>        <tr>            <td>Alex</td>            <td class="noExport">Maldives</td>        </tr>        <tr>            <td>Chris</td>            <td>Canada</td>        </tr>    </tbody></table>Note:In the above sample code, the class ‘.noExport’ has been used to exclude those specified cells from the HTML table data. Therefore the exported Excel Spreadsheet also does not include those cells from the HTML table data.
Syntax:
$("#table-id").table2excel({
    filename: "excel_sheet-name.xls"
});
Example:
<table id="studtable">    <tr>        <th>ID</th>        <th>Name</th>        <th>Age</th>        <th>Address</th>    </tr>    <tr>        <td>101</td>        <td>Alex</td>        <td>15</td>        <td>Maldives</td>    </tr>    <tr>        <td>102</td>        <td>Chris</td>        <td>14</td>        <td>Canada</td>    </tr>          <tr>        <td>103</td>        <td>Jay</td>        <td>15</td>        <td>Toronto</td>    </tr>  </table>  <script>   $(document).ready(function () {    $("#studtable").table2excel({        filename: "Students.xls"    }); });  </script>
Output:
 
ID    Name    Age    Address
101    Alex    15    Maldives
102    Chris    14    Canada
103    Jay    15    Toronto
The above output gets converted into an Excel spreadsheet in the exact same manner the HTML table is.
About ‘table2excel’: The ‘table2excel’ is a simple yet useful jQuery plugin that allows for exporting HTML table data to an Excel file. The ‘table2excel’ also has a feature to exclude cells that contain a specified class.
Syntax for noExport:
$(document).ready(function() {
    $("#table-id").table2excel({
        exclude: ".noExport",
        filename: "name-of-the-file",
    });
});
Example code for excluding some specified cells:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>  <button>Export</button><table>    <thead>        <tr>            <td class="noExport">                This cell will not be exported.            </td>            <td>                This cell will get exported.            </td>        </tr>    </thead>    <tbody>        <tr>            <td>Alex</td>            <td class="noExport">Maldives</td>        </tr>        <tr>            <td>Chris</td>            <td>Canada</td>        </tr>    </tbody></table>
Note:In the above sample code, the class ‘.noExport’ has been used to exclude those specified cells from the HTML table data. Therefore the exported Excel Spreadsheet also does not include those cells from the HTML table data.
Approach 2: Using simple HTML: Consider the same students table above to understand the below. Let’s use a button in our code which when clicked to converts the HTML data table into an Excel spreadsheet.Note that the ‘export’ button below does not actually convert the HTML table to an excel sheet. This has to used in a proper and already existing HTML code to get the Excel spreadsheet and will not work in this IDE.<!DOCTYPE html><html>  <head>    <title>        HTML Table To Excel         spreadsheet using        HTML only    </title></head>  <body>    <table id="studtable">        <tr>            <th>ID</th>            <th>Name</th>            <th>Age</th>            <th>Address</th>        </tr>        <tr>            <td>101</td>            <td>Alex</td>            <td>15</td>            <td>Maldives</td>        </tr>        <tr>            <td>102</td>            <td>Chris</td>            <td>14</td>            <td>Canada</td>        </tr>        <tr>            <td>103</td>            <td>Jay</td>            <td>15</td>            <td>Toronto</td>        </tr>    </table>      <button onclick="tableToExcel(        'studtable', 'Students')">        Click to Export    </button></body>  </html>Output:
Note that the ‘export’ button below does not actually convert the HTML table to an excel sheet. This has to used in a proper and already existing HTML code to get the Excel spreadsheet and will not work in this IDE.
<!DOCTYPE html><html>  <head>    <title>        HTML Table To Excel         spreadsheet using        HTML only    </title></head>  <body>    <table id="studtable">        <tr>            <th>ID</th>            <th>Name</th>            <th>Age</th>            <th>Address</th>        </tr>        <tr>            <td>101</td>            <td>Alex</td>            <td>15</td>            <td>Maldives</td>        </tr>        <tr>            <td>102</td>            <td>Chris</td>            <td>14</td>            <td>Canada</td>        </tr>        <tr>            <td>103</td>            <td>Jay</td>            <td>15</td>            <td>Toronto</td>        </tr>    </table>      <button onclick="tableToExcel(        'studtable', 'Students')">        Click to Export    </button></body>  </html>
Output:
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
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”.You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
How to set div width to fit content using CSS ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)