The simple, easy-to-implement plugin to export HTML tables to xlsx, xls, csv, and txt files
TableExport demo -- TableExport + RequireJS skeleton -- TableExport + Flask skeleton.
Notice: In May 2017, v3.0.0 will be superceded by v4.0.0. Althought this is a major version bump, fear not, because all changes will be 100% backwards-compatible.
So why the major version bump you ask? Well, the rationale for a major version bump is that due to a change in TableExport
's dependencies, in v4.0.0 forth, JQuery will no longer be a required dependency, instead it will be purely optional. So existing implementations with jQuery will continue to work unimpeded, now with the added benefit that new projets no longer need to rely on the overhead of such large library, unless of course you prefer jQuery or it is already part of your project.
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:
<script src="jquery.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
Install with Bower
$ bower install tableexport.js
Install with npm
$ npm install tableexport
Dependencies
Required:
*
jQuery dependency requirement is removed as of 4.0.0-alpha.2
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.
<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
.
<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 bootstrap
property set to false
.
$("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.
JavaScript
To use the export plugin, just call:
$("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.
$("table").tableExport({
headings: true,
footers: true,
formats: ["xls", "csv", "txt"],
fileName: "id",
bootstrap: true,
position: "bottom",
ignoreRows: null,
ignoreCols: null,
ignoreCSS: ".tableexport-ignore",
emptyCSS: ".tableexport-empty",
trimWhitespace: false
});
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.
var tables = $("table").tableExport();
tables.update({
fileName: "newFile"
});
tables.reset();
tables.remove();
Properties
A table of available properties and their usage can be found here
Methods
A table of available methods and their usage can be found here
Settings
Each button is assigned a default class and default content based on its respective filetype and corresponding css styles.
$.fn.tableExport.xlsx = {
defaultClass: "xlsx",
buttonContent: "Export to xlsx",
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
fileExtension: ".xlsx"
};
$.fn.tableExport.xls = {
defaultClass: "xls",
buttonContent: "Export to xls",
separator: "\t",
mimeType: "application/vnd.ms-excel",
fileExtension: ".xls"
};
$.fn.tableExport.csv = {
defaultClass: "csv",
buttonContent: "Export to csv",
separator: ",",
mimeType: "application/csv",
fileExtension: ".csv"
};
$.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 that.
$.fn.tableExport.charset = "charset=utf-8";
$.fn.tableExport.defaultFileName = "myDownload";
$.fn.tableExport.defaultButton = "button-default";
$.fn.tableExport.bootstrap = ["btn", "btn-default", "btn-toolbar"];
$.fn.tableExport.rowDel = "\r\n";
Browser Support
| Chrome | Firefox | IE | Opera | Safari * |
---|
Android | ✓ | ✓ | - | ✓ | - |
iOS | ✓ | - | - | - | ✓ |
Mac OSX | ✓ | ✓ | - | ✓ | ✓ |
Windows | ✓ | ✓ | ✓ | ✓ | ✓ |
*only partial support for xls
and xlsx
: requires third-party dependency (Blob.js)
Live Demo
A live, interactive demo can be found on the TableExport webpage.
License
TableExport.js is licensed under the terms of the MIT License
:star: Credits
Special thanks the the following contributors: