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.
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.
To use this library, simple call the TableExport constructor:
newTableExport(document.getElementsByTagName("table"));// OR simplyTableExport(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: ["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)
RTL:false,// (Boolean), set direction of the worksheet to right-to-left (default: false) sheetname:"id"// (id, String), sheet name for the exported spreadsheet, (default: 'id')});
Note: to use the xlsx filetype, you must include js-xlsx; reference the Add-Ons section.
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"));
var tableId ="export-buttons-table";varXLS=table.CONSTANTS.FORMAT.XLS;/* get export data (see `getExportData` above) */var exportDataXLS =table.getExportData()[tableId][XLS];/* get file size (bytes) */var bytesXLS =table.getFileSize(exportDataXLS.data,exportDataXLS.fileExtension);/********************************** ** bytesXLS (file size in bytes) **********************************352*/
/** * CSS selector or selector[] to exclude/remove cells (<td> or <th>) from the exported file(s). * @type{selector|selector[]} * @memberofTableExport.prototype */// selectorTableExport.prototype.ignoreCSS =".tableexport-ignore";// selector[]TableExport.prototype.ignoreCSS = [".tableexport-ignore",".other-ignore-class"];// OR using jQuery// selector$.fn.tableExport.ignoreCSS =".tableexport-ignore";// selector[]$.fn.tableExport.ignoreCSS = [".tableexport-ignore",".other-ignore-class"];
/** * CSS selector or selector[] to replace cells (<td> or <th>) with an empty string in the exported file(s). * @type{selector|selector[]} * @memberofTableExport.prototype */// selectorTableExport.prototype.emptyCSS =".tableexport-empty";// selector[]TableExport.prototype.emptyCSS = [".tableexport-empty",".other-empty-class"];// OR using jQuery// selector$.fn.tableExport.emptyCSS =".tableexport-empty";// selector[]$.fn.tableExport.emptyCSS = [".tableexport-empty",".other-empty-class"];
/* 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";
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.
