jQuery | table2excel Plugin

Last Updated : 28 May, 2020

In the process of web design and development, taking regular backups is an important practice followed. jQuery provides table2excel plugin which helps to export HTML tables to excel (.xls) files.

Please download the required library files from the jQuery table2excel plugin and include it in your working folder as shown in the following examples. Download link: https://github.com/rainabba/jquery-table2excel

Example 1: The following example demonstrates the very basic functionality of the table2excel plugin. The table contents along with the headers are exported to the "GFGFile.xls" file.

html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery table2excel plugin</title>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
        </script>
        <script src="jquery.table2excel.js"></script>
    </head>
    <body>
        <h1 style="color:green">GeeksForGeeks</h1>
        <b>jQuery table2excel plugin </b>
        <p></p>
        <table id="myTable" class="table2excel">
            <tr>
             <th>Company</th>
             <th>Name</th>
             <th>Country</th>
            </tr>
              <tr>
                <td>IBM</td>
                <td>Maria</td>
                <td>Germany</td>
              </tr>
              <tr>
                <td>TCS</td>
                <td>Yen Chang</td>
                <td>Mexico</td>
              </tr>
              <tr>
                <td>Microsoft</td>
                <td>Roland</td>
                <td>Austria</td>
              </tr>
              <tr>
                <td>Wipro</td>
                <td>Helen</td>
                <td>UK</td>
              </tr>
              <tr>
                <td>Samsung</td>
                <td>Yoshwini</td>
                <td>Canada</td>
              </tr>
              <tr>
                <td>Virtusa</td>
                <td>Rovelli</td>
                <td>Italy</td>
              </tr>
        </table>        
        
        <script>
            $(function() {
                $("#myTable").table2excel({
                  name: "Backup file for HTML content",

                  //  include extension also
                  filename: "GFGFile.xls",

    // 'True' is set if background and font colors preserved
                  preserveColors: false 
              });        
                
                
            });
        </script>
    </body>
</html>

Output:

Before export:
After export in 'GFGFile.xls':

Example 2: In the following example, table2excel plugin is explained along with showing more options setting. In the HTML structure, two tables are taken for showing different results in export files. The table's row 1 headers are not exported in the output excel files as they have been assigned class "noExl" as shown in the below program. Table 2 is assigned with class "colorClass" so that the colors assigned to any HTML controls are preserved as shown in the code. Programmers can set options depending on the application's requirements.

html

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery table2excel plugin</title>
        <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
        </script>
        <script src="jquery.table2excel.js"></script>
    </head>
    <body>
        <h1 style="color:green">GeeksForGeeks</h1>
        <b>jQuery table2excel plugin </b>
        <p></p>
        <table class="table2excel">
            <thead>
                <tr class="noExl">
                <td>
                    Table 1 Header, column 1 (not exported)</td>
                   <td>Table 1 Header, column 2(not exported)
                </td>
              </tr>
                <tr><td>Table 1 Header, column 1 (exported)</td>
               <td>Table 1 Header, column 2 (exported)</td></tr>
            </thead>
            <tbody>
                <tr><td>Row 1, column 1 data of table1</td>
                <td>Row 1 column 2 data of table 1</td></tr>

                <tr><td>Row 2, column 1 data of table1</td>
                <td>Row 2, column 2 dataof table1</td></tr>
            </tbody>
            <tfoot>
                <tr><td colspan="2">This is the footer of table 1.</td></tr>
            </tfoot>
        </table>
        <button class="exportBtnClass">Export to XLS file</button><p></p>
        
        <table class="table2excel colorClass">
            <thead>
                <tr class="noExl">
                <td>Table 2 Header, column 1 (not exported)</td>
                <td>Table 2 Header, column 1 (not exported)</td></tr>

                <tr><td style="background-color: green;">
    Table 2 Header, column 1 (exported with colors)</td>
             <td>Table 2 Header, column 2 (exported)</td></tr>
            </thead>
            <tbody>
                <tr><td style="background-color: red;">
          Row 1, column 1 data of table2</td>
         <td>Row 1 column 2 data of table2</td></tr>
                <tr><td>Row 2, column 1 data of table2</td>
                <td>Row 2, column 2 data of table2</td></tr>
                
            </tbody>
            <tfoot>
                <tr><td colspan="2">
                This is the footer of table 2</td></tr>
            </tfoot>
        </table>
        <button class="exportBtnClass">
                  Export to XLS file
         </button>

        <script>
            $(function() {
                
                $(".exportBtnClass").click(function(e){
                    var table = $(this).prev('.table2excel');
                    if(table && table.length){
                        var preserveColors = 
                       (table.hasClass('colorClass') ? true : false);

                        $(table).table2excel({

// This class's content is excluded from getting exported
                            exclude: ".noExl", 
                            name: "Output excel file ",
                            filename: 
"outputFile-" + new Date().toString().replace(/[\-\:\.]/g, "") + ".xls",

                            fileext: ".xls", //File extension type
                            exclude_img: true,
                            exclude_links: true,
                            exclude_inputs: true,
                            preserveColors: preserveColors
                        });
                    }
                });        
            });
        </script>
    </body>
</html>