jQuery | table2excel Plugin

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery table2excel plugin</title>
        <script src=
        </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery table2excel plugin</title>
        <script src=
        </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>

chevron_right


Output:

  • Before export :

  • After export of table 1 :

  • After export of table 2:




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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.