tableexport
Advanced tools
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
Examples -- Demo -- TableExport + RequireJS -- TableExport + Flask -- TableExport + Webpack 1.
v3 docs and README:v4 docs and README (below):<script> tagsTo use this library, include the FileSaver.js library, and TableExport library before the closing <body> tag of your HTML document:
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
$ bower install tableexport.js
$ npm install tableexport
| uncompressed | compressed | |
|---|---|---|
| CSS | 🔗 | 🔗 |
| JS | 🔗 | 🔗 |
| Images | — | 🔗xlsx🔗xls🔗csv🔗txt |
| uncompressed | compressed | |
|---|---|---|
| CSS | 🔗 | 🔗 |
| JS | 🔗 | 🔗 |
| Images | — | 🔗xlsx🔗xls🔗csv🔗txt |
In order to provide Office Open XML SpreadsheetML Format ( .xlsx ) support, you must include the following third-party library in your project before both FileSaver.js and TableExport.
Including
xlsx.core.jsis NOT necessary if installing withBowerornpm
<script src="xlsx.core.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
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.
Including
Blob.jsis NOT necessary if installing withBowerornpm
<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
...
<script src="tableexport.js"></script>
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.
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 filetype(s) of your choice.
/* Defaults */
TableExport(document.getElementsByTagName("table"), {
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: ['xls', 'csv', 'txt'], // (String[]), filetype(s) for the export, (default: ['xls', '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)
});
Note: to use the
xlsxfiletype, you must include js-xlsx; reference theAdd-Onssection.
TableExport supports additional methods (getExportData, update, reset and remove) to control the TableExport instance after creation.
/* First, call the `TableExport` constructor and save the return instance to a variable */
var table = TableExport(document.getElementById("export-buttons-table"));
getExportData/* get export data */
var exportData = table.getExportData(); // useful for creating custom export buttons, i.e. when (exportButtons: false)
/*****************
** exportData ***
*****************
{
"export-buttons-table": {
xls: {
data: "...",
fileExtension: ".xls",
filename: "export-buttons-table",
mimeType: "application/vnd.ms-excel"
},
...
}
};
*/
update/* update */
table.update({
filename: "newFile" // pass in a new set of properties
});
reset/* reset */
table.reset(); // useful for a dynamically altered table
remove/* remove */
table.remove(); // removes caption and buttons
Below are some of the popular configurable settings to customize the functionality of the library.
ignoreCSS/* class selector to exclude/remove cells (<td> or <th>) or rows (<tr>) from the exported file(s). */
TableExport.prototype.ignoreCSS = "tableexport-ignore";
// OR using jQuery
$.fn.tableExport.ignoreCSS = "tableexport-ignore" ;
emptyCSS/* class selector to replace cells (<td> or <th>) with an empty string (i.e. "blank cell") in the exported file(s). */
TableExport.prototype.emptyCSS = "tableexport-empty";
// OR using jQuery
$.fn.tableExport.emptyCSS = "tableexport-empty" ;
/* default charset encoding (UTF-8) */
TableExport.prototype.charset = "charset=utf-8";
/* default `filename` property if "id" attribute is unset */
TableExport.prototype.defaultFilename = "myDownload";
/* default class to style buttons when not using Bootstrap or the built-in export buttons, i.e. when (`bootstrap: false` & `exportButtons: true`) */
TableExport.prototype.defaultButton = "button-default";
/* Bootstrap classes used to style and position the export button, i.e. when (`bootstrap: true` & `exportButtons: true`) */
TableExport.prototype.bootstrapConfig = ["btn", "btn-default", "btn-toolbar"];
/* row delimeter used in all filetypes */
TableExport.prototype.rowDel = "\r\n";
/* Format-specific configuration (default class, content, and separator) */
/* Excel Open XML spreadsheet (.xlsx) */
TableExport.prototype.xlsx = {
defaultClass: "xlsx",
buttonContent: "Export to xlsx",
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
fileExtension: ".xlsx"
};
/* Excel Binary spreadsheet (.xls) */
TableExport.prototype.xls = {
defaultClass: "xls",
buttonContent: "Export to xls",
separator: "\t",
mimeType: "application/vnd.ms-excel",
fileExtension: ".xls"
};
/* Comma Separated Values (.csv) */
TableExport.prototype.csv = {
defaultClass: "csv",
buttonContent: "Export to csv",
separator: ",",
mimeType: "application/csv",
fileExtension: ".csv"
};
/* Plain Text (.txt) */
TableExport.prototype.txt = {
defaultClass: "txt",
buttonContent: "Export to txt",
separator: " ",
mimeType: "text/plain",
fileExtension: ".txt"
};
TableExport packages with customized Bootstrap CSS stylesheets to deliver enhanced table and button styling. These styles can be enabled by initializing with the bootstrap property set to true.
TableExport(document.getElementsByTagName("table"), {
bootstrap: true
});
When used alongside Bootstrap, there are four custom classes .xlsx, .xls, .csv, .txt providing button styling for each of the exportable filetypes.
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✓ | - | ✓ | - |
| iOS | ✓ | - | - | - | ✓ |
| Mac OSX | ✓ | ✓ | - | ✓ | ✓ |
| Windows | ✓ | ✓ | ✓ | ✓ | ✓ |
A full list of browser support can be found in the FileSaver.js README. Some legacy browsers may require an additional third-party dependency: Blob.js
A live, interactive demo can be found on the TableExport webpage.
TableExport is licensed under the terms of the MIT License
ignoreRows and ignoreCols (rows/cols rendered as empty strings rather than being removed).update, reset, and remove TableExport prototype properties without requiring jQuery.ignoreCSS and emptyCSS to work with any selector|selector[] instead of solely a single CSS class.Special thanks the the following contributors:
FAQs
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
The npm package tableexport receives a total of 2,091 weekly downloads. As such, tableexport popularity was classified as popular.
We found that tableexport demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.