jQuery Plugins › jQuery Table Plugins › jQuery jTableToCSV.js

Convert Tabular Data To Excel(CSV) - jTableToCSV.js

File Size: 21.5 KB
Views Total: 3773
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE8+, FireFox, Opera, Safari#excel#table export#CSV
Convert Tabular Data To Excel(CSV) - jTableToCSV.js

jTableToCSV.js is a fast, cross-browser, highly-customizable Table To CSV converter for converting tabular data to base64 that is downloadable as an Excel (CSV) file.

Alternative plugins:

See also:

How to use it:

1. Add the JavaScript jTableToCSV.js after jQuery JavaScript library.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<!-- CSV Export -->
<script src="jTableToCSV.js"></script>

2. Call the function to generate an 'Export' button next to your html table. That's it.

(function($){
  $('table').elementToCSV();
})(jQuery);

3. Customize the table to CSV converter with the following options.

$('table').elementToCSV({
  
  // set it to false once dev is done
  debug: true,

  // css classes prefix
  prefix: 'ttcsv_',

  // allow users to insert their own element
  generateExportButton: true,

  // default export trigger
  exportButton: '<button type="button"></button>',

  // default Export Text
  exportButtonText: 'Export',

  // default export icon
  exportButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M567.31 283.89l-71.78-68.16c-8.28-7.8-20.41-9.88-30.84-5.38-10.31 4.42-16.69 13.98-16.69 24.97V288h-64V131.97c0-12.7-5.1-25-14.1-33.99L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V352h-31.99v112.01c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v128H168c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h280v52.67c0 10.98 6.38 20.55 16.69 24.97 14.93 6.45 26.88-1.61 30.88-5.39l71.72-68.12c5.62-5.33 8.72-12.48 8.72-20.12s-3.1-14.81-8.7-20.12zM256.03 128.07V32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48zM480 362.88V245.12L542 304l-62 58.88z"></path></svg>',

  // wrapper for inserting export button
  exportButtonWrapper: false,

  // allow users to insert their own element
  generateDownloadButton: true,

  // default download trigger
  downloadButton: '<a href="javascript:void(0);"></a>',

  // default Download Text
  downloadButtonText: 'Download',

  // default download icon
  downloadButtonIcon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"></path></svg>',

  // wrapper for inserting download button
  downloadButtonWrapper: false,

  // export event Trigger
  exportEvent: false,

  // selector for header
  headerSelector: 'thead',

  // selector for header row
  headerRowSelector: 'tr',

  // selector for header cell
  headerCellSelector: 'th',

  // selector for main content
  contentSelector: 'tbody',

  // selector for body Row
  rowSelector: 'tr',

  // selector for body cell elements
  cellSelector: 'td',

  // vertical tab character
  tempColumnDelimiter: String.fromCharCode(11),

  // null character
  tempRowDelimiter: String.fromCharCode(0),

  // actual delimiter for CSV format,
  columnDelimiter: '","',

  // new line for CSV format
  rowDelimiter: '"\r\n"',

  // duration for animations
  animationTime: 250
  
});

4. Apply your own styles to the Export/Download button.

.ttcsv_triggers--wrapper button, .ttcsv_triggers--wrapper a {
  display: block;
  width: auto;
  border: none;
  background: #ededed;
  padding: 5px 10px;
}

.ttcsv_triggers--wrapper button svg, .ttcsv_triggers--wrapper a svg {
  margin-right: 6px;
  max-height: 20px;
  vertical-align: top;
}

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