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 |

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:
- Export Table & JSON Data To Excel With jQuery - ExportToExcel
- Exporting Html Tables To CSV/XLS/XLSX/Text - jQuery TableExport
- HTML Table To Excel Converter – saveAsExcel.js
- Export Html Table To Excel Spreadsheet using jQuery - table2excel
- Client Side Table To Excel Export Plugin - jQuery ExcelGen
See also:
- Convert CSV File Into Data Table
- Generate A Table From A CSV File - CSV Parser
- CSV To JSON Data Converter with jQuery
- CSV To Table Converter – CsvToTable.js
- Export JSON Data To CSV File – CSV-Export
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.