Export Html Table to .xlsx, .xls, .csv and .txt using jQuery Plugin – TableExport.js

Export Html Table to .xlsx, .xls, .csv and .txt using jQuery Plugin – TableExport.js
Are you looking for a jQuery plugin which export your HTML table into .xlsx, .xls, .csv and .txt file? If yes then here I am going to share jQuery plugin TableExport.js which allow you to quickly and dynamically convert HTML tables into excel spreadsheets .xlsx,.xls, .csv and .txt in only one line of code.
Export Html Table to .xlsx, .xls, .csv and .txt

Libraries

Include all the following css+js libraries on page where you have to add export to .xls, .csv and .txt feature.

<!--CSS-->
<link href="tableexport.min.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="FileSaver.min.js"></script>
<script src="tableexport.min.js"></script>

Additional Libraries
In order to provide Office Open XML SpreadsheetML Format ( .xlsx ) support, you must include the xls.core.min.js third-party library in your project before both FileSaver.js and TableExport. To support legacy browsers ( Chrome < 20, Firefox < 13, Opera < 12.10, IE < 10, Safari < 6 ) include the Blob.js polyfill before the FileSaver.js script.

<script src="Blob.min.js"></script>
<script src="xls.core.min.js"></script>



HTML

Sample html table which need to export to .xls, .csv and .txt

<table id="employee-salary" width="70%" class="table table-striped">
            <thead>
            <tr>
                <th>
 
                    Name
 
                </th>
                <th>Position</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Thor Walton</td>
                <td>Regional Director</td>
                <td>45</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Travis Clarke</td>
                <td>Software Engineer</td>
                <td>30</td>
                <td>$275,000</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Office Manager</td>
                <td>22</td>
                <td>$67,670</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td class="disabled"></td>
                <td class="disabled"></td>
                <td class="disabled"></td>
                <th>$441,210</th>
            </tr>
            </tfoot>
        </table>

table id will be auto set as file name whenever you export table.


JS

To use this library, simple call the TableExport constructor:

new TableExport(document.getElementsByTagName("table"));
 
// OR simply
 
TableExport(document.getElementsByTagName("table"));
 
// OR using jQuery
 
$("table").tableExport();

Additional properties can be passed-in to customize the look and feel of your tables, buttons, and exported data.

$("table").tableExport({
    headers: true,                              // (Boolean), display table headers (th or td elements) in the <thead>, (default: true)
    footers: true,                              // (Boolean), display table footers (th or td elements) in the <tfoot>, (default: false)
    formats: ['xlsx', 'csv', 'txt'],            // (String[]), filetype(s) for the export, (default: ['xlsx', 'csv', 'txt'])
    filename: 'id',                             // (id, String), filename for the downloaded file, (default: 'id')
    bootstrap: false,                           // (Boolean), style buttons using bootstrap, (default: true)
    exportButtons: true,                        // (Boolean), automatically generate the built-in export buttons for each of the specified formats (default: true)
    position: 'bottom',                         // (top, bottom), position of the caption element relative to table, (default: 'bottom')
    ignoreRows: null,                           // (Number, Number[]), row indices to exclude from the exported file(s) (default: null)
    ignoreCols: null,                           // (Number, Number[]), column indices to exclude from the exported file(s) (default: null)
    trimWhitespace: true                        // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s) (default: false)
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


One Reply to “Export Html Table to .xlsx, .xls, .csv and .txt using jQuery Plugin – TableExport.js”

  1. Hi Rohit ,

    i found your website very interesting and usefull,
    can you please give some example of cahtbot for appliction in php

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.