jQuery | table2excel Plugin - GeeksforGeeks

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.
<!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:
Before export:
After export in ‘GFGFile.xls’:
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.
<!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>
Output:
Before export :
Before export :
After export of table 1 :
After export of table 1 :
After export of table 2:
After export of table 2:
jQuery-Plugin
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
How to redirect to a particular section of a page using HTML or jQuery?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?