How to Convert HTML Table into Excel Spreadsheet using jQuery ?

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.