Fork me on GitHub

TableExport.js


The simple, easy-to-implement jQuery plugin that allows you to quickly and dynamically convert HTML tables to Excel spreadsheets .xls .xlsx, comma separated values .csv, and plain text .txt in only one line of code.


Getting Started

Download and Setup


To use this plugin, include the jQuery library, FileSaver.js script, and TableExport.js plugin before the closing <body> tag of your HTML document:


Copy
<script src="jquery.js"></script>
<script src="FileSaver.js"></script>
 ...
<script src="tableexport.js"></script>


Install with Bower


Copy
$ bower install tableexport.js


Install with npm


Copy
$ npm install tableexport


Use with a CDN


uncompressed compressed
CSS tableexport.css tableexport.min.css
JavaScript tableexport.js tableexport.min.js
Images xlsx.svg  xls.svg  csv.svg  txt.svg


Dependencies


Required:


* jQuery dependency requirement is removed as of 4.0.0-alpha.3


Optional / Theming:


Add-Ons:

In order to provide Office Open XML SpreadsheetML Format ( .xlsx ) support, you must include the following third-party script to your project before FileSaver.js and TableExport.js



Copy
<script src="xlsx.core.js"></script>
<script src="FileSaver.js"></script>
 ...
<script src="tableexport.js"></script>

Older Browsers:

To support older browsers ( Chrome < 20, Firefox < 13, Opera < 12.10, IE < 10, Safari < 6 ) include the Blob.js polyfill before the FileSaver.js script.

Until Safari provides native support for either the HTML5 download attribute or service workers, limited xlx and xlsx support is provided by including the Blob.js polyfill, albeit the filename will always be labeled Unknown.



Copy
<script src="xlsx.core.js"></script>
<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
 ...
<script src="tableexport.js"></script>


Usage

CSS


By default, TableExport.js utilizes the Bootstrap CSS framework to deliver enhanced table and button styling. For non-Bootstrap projects, initialize with the bootstrapproperty set to false.


Copy
$("table").tableExport({
    bootstrap: false
});

When used along with Bootstrap, there are four custom classes .xlsx, .xls, .csv, .txt providing button styling for each of the exportable filetypes.


with Bootstrap ( bootstrap: true )





without Bootstrap ( bootstrap: false )








JavaScript


To use the export plugin, just call:


Copy
$("table").tableExport();

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

Notice that by default, TableExport will create export buttons for three different filetypes xls, csv, txt. You can choose which buttons to generate by setting the formats property to the filetypes of your choice.


Copy
/* Defaults */
$("table").tableExport({
    headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>
    footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>
    formats: ["xls", "csv", "txt"],    // (String[]), filetypes for the export
    fileName: "id",                    // (id, String), filename for the downloaded file
    bootstrap: true,                   // (Boolean), style buttons using bootstrap
    position: "bottom"                 // (top, bottom), position of the caption element relative to table
    ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file
    ignoreCols: null                   // (Number, Number[]), column indices to exclude from the exported file
    ignoreCSS: ".tableexport-ignore"   // (selector, selector[]), selector(s) to exclude from the exported file
});

Note:  to use the xlsx filetype, you must include the third-party scripts listed in the Dependencies section.


TableExport supports additional methods (update, reset and remove) to control it after creation.

Copy
/* Run plugin and save it to a variable */
var tables = $("table").tableExport();

Copy
/* update */
tables.tableExport.update({
    filename: "newFile"         // pass in a new set of options
});

/* reset */
tables.tableExport.reset();     // useful for a dynamically altered table

/* remove */
tables.tableExport.remove();     // removes caption and buttons



Properties


Below is the list of available properties:

Property Description Values Default
headings Boolean
indicates whether or not to export the table rows in the <thead>.
true: include headings
false: exclude headings
true
footers Boolean
indicates whether or not to export the table rows in the <tfoot>.
true: include headings
false: exclude headings
true
formats String[]
filetypes to export. A button will be created for each type in the array.
xlsx: Open XML spreadsheet
xls: Binary spreadsheet
csv: comma separated value
txt: plain text
["xls", "csv", "txt"]
fileName String
filename for the exportable files. A value of "id" will assign the id attribute of the table as the filename.
id: table id attribute
String:
"myFile"  // string
"id"
bootstrap Boolean
indicates whether or not to style the buttons using the Bootstrap CSS framework.
true: use Bootstrap* styling
false: use default styling
true
position String
position of the caption element relative to table.
top: position above table
bottom: position below table
"bottom"
ignoreRows Number, Number[]
zero-based row index (indices) to exclude from the exported file. This does not include any table headings (<th>).
null or false: include all rows
Number:
3  // integer
Number[]:
[0,2]  // integer[]
null
ignoreCols Number, Number[]<
zero-based column index (indices) to exclude from the exported file.
null or false: include all columns
Number:
0  // integer
Number[]:
[1,2]  // integer[]
null
ignoreCSS selector, selector[]
excludes <tr>, <td>, or <th> elements matching the provided selector(s).
selector:
"tr.hide"  // selector
selector[]:
[".hide", ".ignore"]  // selector[]
"tableexport-ignore"
* requires the Bootstrap CSS framework


Methods


TableExport supports additional methods to control it after creation:

.tableExport.update( [ properties ] )

Argument Type Description Required Default
properties Object An object of TableExport property-value pairs No none

.tableExport.reset()

.tableExport.remove()



Settings


Each button is assigned a default class and default content based on its respective filetype and corresponding css styles.


Copy
/* default class, content, and separator for each export type */

/* Excel Open XML spreadsheet (.xlsx) */
$.fn.tableExport.xlsx = {
    defaultClass: "xlsx",
    buttonContent: "Export to xlsx",
    mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    fileExtension: ".xlsx"
};

/* Excel Binary spreadsheet (.xls) */
$.fn.tableExport.xls = {
    defaultClass: "xls",
    buttonContent: "Export to xls",
    separator: "\t",
    mimeType: "application/vnd.ms-excel",
    fileExtension: ".xls"
};

/* Comma Separated Values (.csv) */
$.fn.tableExport.csv = {
    defaultClass: "csv",
    buttonContent: "Export to csv",
    separator: ",",
    mimeType: "application/csv",
    fileExtension: ".csv"
};

/* Plain Text (.txt) */
$.fn.tableExport.txt = {
    defaultClass: "txt",
    buttonContent: "Export to txt",
    separator: "  ",
    mimeType: "text/plain",
    fileExtension: ".txt"
};

Below are additional defaults to support the functionality of the plugin.


Copy
/* default charset encoding (UTF-8) */
$.fn.tableExport.charset = "charset=utf-8";

/* default filename if "id" attribute is set and undefined */
$.fn.tableExport.defaultFileName = "myDownload";

/* default class to style buttons when not using bootstrap  */
$.fn.tableExport.defaultButton = "button-default";

/* bootstrap classes used to style and position the export buttons */
$.fn.tableExport.bootstrap = ["btn", "btn-default", "btn-toolbar"];

/* row delimeter used in all filetypes */
$.fn.tableExport.rowDel = "\r\n";


Browser Support


Chrome Firefox IE Opera Safari *
Android N/A N/A
iOS N/A N/A
Mac OS X
Windows
* only partial support for xls and xlsx : requires third-party dependency (Blob.js)


Live Demo


Countries By Population

Rank Country Population % of world population Date
1 中华人民共和国 (People's Republic of China) 1,370,570,000 18.9% June 24, 2015
2 India 1,273,140,000 17.6% June 24, 2015
3 United States "USA" 321,268,000 4.43% June 24, 2015
4 Indonesia 255,461,700 3.52% July 1, 2015
5 Brazil 204,503,000 2.82% June 24, 2015
6 Pakistan 190,156,000 2.62% June 24, 2015
7 Nigeria 183,523,000 2.53% July 1, 2015
8 Bangladesh 126,880,000 2.19% June 24, 2015


License


TableExport.js is licensed under the terms of the MIT License
The MIT License (MIT)
Copyright (c) 2015 - Travis Clarke - http://travismclarke.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.



Credits


John Resig - jQuery
SheetJS - js-xlsx
Eli Grey - FileSaver.js & Blob.js
Freepik - svg icons