Open In App

jQuery | table2excel Plugin

Last Updated : 28 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        </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.




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


Output:

  • Before export :

  • After export of table 1 :

  • After export of table 2:



Previous Article
Next Article

Similar Reads

jQuery | Page Piling Plugin
jQuery pagePiling.js plug-in is a rich feature available for programmers for piling more than one layout section, one over the other, and accessing each page by URL or mouse scrolling or side bullets navigation. This feature provides all type of smooth vertical, horizontal, and side navigations to the destination anchor links. It also manages callb
5 min read
jQuery | Mask Plugin
jQuery mask is a jQuery plugin that helps in putting on a mask on the basic HTML input fields and other elements. If the developer wants the input field to take inputs in a certain format only, then they can use the jQuery mask plugin for it. This type of functionality can also be created using a back end language like PHP. However, it will be much
3 min read
How to create a jQuery plugin with methods?
Jquery is a Javascript library that is built to design or simplifies HTML, CSS, AJAX, DOM as well as event handling for web development. It is Open Source Software and free to all. More than 10 million websites use jquery. Jquery simply converts a line of javascript into methods that can be called in a single line of code. These plugins are impleme
2 min read
jQuery | Multiscroll Plugin
jQuery provides multiscroll.js plugin which helps programmers to create split web pages along with divided multiple vertical scrolling panels. Note: Please download the jQuery multiscroll plugin to your working folder and include the required files in the head section of your code as shown below. Download "jquery.easings.min.js" file. Download "exa
4 min read
jQuery | DrawSVG Plugin
SVG or Scalar Vector Graphics is Extended Markup Language-based graphics supporting 2 dimensional animations of images enhancing interactiveness. The specifications of SVG are open standards by World Wide Web Consortium defined in XML text files. These files can be changed or created with any drawing software or text file editors.The jQuery provide
5 min read
jQuery Product Tour Plugin
jQuery Product Tour plugin is a lightweight, responsive guided tour plugin for users and programmers to help them understand the usage of a product or website with step-by-step instructions. It is a plugin for implementing a quick and easy help guide for the end-users. It helps in generating mobile-friendly customizable step-by-step guided tours fo
3 min read
jQuery | Alertify Plugin
jQuery framework provides alertify.js plugin that provides pre-designed customizable notification system along with interactive browser dialogs. This extensible and themeable plugin is very useful for developers providing an optimized version of alert messages with stacking up to feature. This small library system effectively display confirmation p
5 min read
jQuery | Flickerplate Plugin
jQuery provides Flickerplate plugin that helps our programmers to create sliders for websites that can cycle through a list of background images along with dot navigation feature and animated arrows. The plugin consists of many more libraries that are responsible for touch detections and events such as custom Modernizr and jQuery Finger library. Wi
5 min read
jQuery | menu-aim plugin
jQuery provides menu-aim plugin that helps programmers to develop effective dropdown menus along with easy navigation of sub-menu contents. The plugin can very well differentiate between user hover on dropdown items vs navigation of submenu content. The plugin also supports JS event handling functions like mouse enter or exit, activate or deactivat
10 min read
jQuery | Tagsort Plugin
jQuery provides Tagsort plugin that is used for displaying tags or filter elements based on different tags in a DOM. The plugin takes data-attributes of HTML page structure and dynamically creates user-friendly tags used for filtering elements. The filtration of elements are done in many ways that are handled in options setting feature provided by
11 min read