Exporting Html Tables To CSV/XLS/XLSX/Text - jQuery TableExport

Exporting Html Tables To CSV/XLS/XLSX/Text - jQuery TableExport
File Size: 2.5 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery plugin that allows exporting html tables to XML spreadsheet (XLSX), Microsoft Excel spreadsheet (XLS), tabular data (CSV) and plain text.

Installation:

# NPM
$ npm install tableexport

# Bower
$ bower install tableexport

How to use it:

1. Load the jQuery TableExport plugin and other required resources in the html page.

<link href="tableexport.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="FileSaver.min.js"></script>
<script src="tableexport.js"></script>

2. Load the following JavaScript libraries for old browsers:

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

3. Call the function on your html table and the plugin will do the rest.

$("table").tableExport();

4. Possible options to customize the table export plugin.

$("table").tableExport({

  // Displays table headings (th or td elements) in the <thead>
  headings: true,                    

  // Displays table footers (th or td elements) in the <tfoot>    
  footers: true, 

  // Filetype(s) for the export
  formats: ["xls", "csv", "txt"],           

  // Filename for the downloaded file
  fileName: "id",                         

  // Style buttons using bootstrap framework  
  bootstrap: true,                     

  // Position of the caption element relative to table
  position: "bottom",                   

  // (Number, Number[]), Row indices to exclude from the exported file(s)
  ignoreRows: null,       

  // (Number, Number[]), column indices to exclude from the exported file(s)              
  ignoreCols: null,                

  // Selector(s) to exclude cells from the exported file(s)       
  ignoreCSS: ".tableexport-ignore",  

  // Selector(s) to replace cells with an empty string in the exported file(s)       
  emptyCSS: ".tableexport-empty",   

  // Removes all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s)     
  trimWhitespace: false         

});

5. You're also allowed to override the global settings as these:

// Character set (character encoding) of the HTML.
$.fn.tableExport.charset = "charset=utf-8";

// Filename fallback for exported files.
$.fn.tableExport.defaultFileName = "myDownload";

// Class applied to each export button element.
$.fn.tableExport.defaultButton = "button-default";

// Bootstrap configuration classes ["base", "theme", "container"].
$.fn.tableExport.bootstrap = ["btn", "btn-default", "btn-toolbar"];

// Row delimeter.
$.fn.tableExport.rowDel = "\r\n";

// HTML entity mapping for special characters.
$.fn.tableExport.entityMap = {"&": "&#38;", "<": "&#60;", ">": "&#62;", "'": '&#39;', "/": '&#47;'};

6. Default configurations for files:

/**
* XLSX (Open XML spreadsheet) file extension configuration
* @memberof TableExport.prototype
*/
xlsx: {
  defaultClass: "xlsx",
  buttonContent: "Export to xlsx",
  mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  fileExtension: ".xlsx"
},

/**
* XLS (Binary spreadsheet) file extension configuration
* @memberof TableExport.prototype
*/
xls: {
  defaultClass: "xls",
  buttonContent: "Export to xls",
  separator: "\t",
  mimeType: "application/vnd.ms-excel",
  fileExtension: ".xls"
},

/**
* CSV (Comma Separated Values) file extension configuration
* @memberof TableExport.prototype
*/
csv: {
  defaultClass: "csv",
  buttonContent: "Export to csv",
  separator: ",",
  mimeType: "text/csv",
  fileExtension: ".csv"
},

/**
* TXT (Plain Text) file extension configuration
* @memberof TableExport.prototype
*/
txt: {
  defaultClass: "txt",
  buttonContent: "Export to txt",
  separator: "  ",
  mimeType: "text/plain",
  fileExtension: ".txt"
},

7. API methods:

var myTable = $("table").tableExport();

// updates settings
myTable.update({
  fileName: "newFile" 
});

// resets plugin
myTable.reset(); 

// removes export buttons
myTable.remove(); 

// gets export data
var exportData = myTable.getExportData(); 

Change log:

v4.0.10 (2017-05-27)

  • JS update

v4.0.8 (2017-05-26)

  • jQuery-Custom-Bootstrap-Checkboxesupdate tableexport.d.ts definition file to allow for optional defaults

v4.0.7 (2017-05-26)

  • allow for require and default & named imports

v4.0.6 (2017-05-25)

  • fix: date format in 'xlsx' includes time metadata
  • improve AMD define statement with syntactic sugar

2017-05-23

  • v4.0.4 - add method to retrieve ArrayBuffer bytes

2017-05-09

  • v4.0.2 - fix: update TypeScript definition file

2017-05-05

  • v4.0.0 - Major update; removed jQuery dependency.

2017-05-03

  • v3.3.12 - fix export does not work on IE

2017-05-02

  • v3.3.11 - fix not able to sum number

This awesome jQuery plugin is developed by clarketm. For more Advanced Usages, please check the demo page or visit the official website.