-
-
Save pixelsoul/7491150 to your computer and use it in GitHub Desktop.
jQuery plugin to export a html table to a Excel file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>tableToExcel Demo</title> | |
| <script src="tableToExcel.js"></script> | |
| </head> | |
| <body> | |
| <h1>tableToExcel Demo</h1> | |
| <p>Exporting the W3C Example Table</p> | |
| <input type="button" id="exportButton1" value="Export to Excel"> | |
| <table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups" frame="hsides" border="2"><caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption><colgroup align="center"></colgroup><colgroup align="left"></colgroup><colgroup span="2" align="center"></colgroup><colgroup span="3" align="center"></colgroup><thead valign="top"><tr><th>Code-Page<br>ID</th><th>Name</th><th>ACP</th><th>OEMCP</th><th>Windows<br>NT 3.1</th><th>Windows<br>NT 3.51</th><th>Windows<br>95</th></tr></thead><tbody><tr><td>1200</td><td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td><td></td><td></td><td>X</td><td>X</td><td>*</td></tr><tr><td>1250</td><td style="font-weight: bold">Windows 3.1 Eastern European</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1251</td><td>Windows 3.1 Cyrillic</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1252</td><td>Windows 3.1 US (ANSI)</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1253</td><td>Windows 3.1 Greek</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1254</td><td>Windows 3.1 Turkish</td><td>X</td><td></td><td>X</td><td>X</td><td>X</td></tr><tr><td>1255</td><td>Hebrew</td><td>X</td><td></td><td></td><td></td><td>X</td></tr><tr><td>1256</td><td>Arabic</td><td>X</td><td></td><td></td><td></td><td>X</td></tr><tr><td>1257</td><td>Baltic</td><td>X</td><td></td><td></td><td></td><td>X</td></tr><tr><td>1361</td><td>Korean (Johab)</td><td>X</td><td></td><td></td><td>**</td><td>X</td></tr></tbody><tbody><tr><td>437</td><td>MS-DOS United States</td><td></td><td>X</td><td>X</td><td>X</td><td>X</td></tr><tr><td>708</td><td>Arabic (ASMO 708)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr><tr><td>709</td><td>Arabic (ASMO 449+, BCON V4)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr><tr><td>710</td><td>Arabic (Transparent Arabic)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr><tr><td>720</td><td>Arabic (Transparent ASMO)</td><td></td><td>X</td><td></td><td></td><td>X</td></tr></tbody></table> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| To use: | |
| $('#exportButton1').tableToExcel({ | |
| table: '#testTable', | |
| exclude: '.exclude', | |
| name: 'testing-export' | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // tableToExcel.js | |
| (function ($) { | |
| $.fn.extend({ | |
| // plugin name | |
| tableToExcel: function (options) { | |
| // options | |
| var defaults = { | |
| table: '#teTable', | |
| exclude: '.teExclude', | |
| name: 'export' | |
| } | |
| var options = $.extend(defaults, options); | |
| var o = options; | |
| // on click export button | |
| $(this).on('click', function (e) { | |
| var rows = ''; | |
| var fTable = ''; | |
| // get contents of table except for exclude | |
| $(o.table + ' tr ').not(o.exclude).each(function () { | |
| rows += '<tr>' + $(this).html() + '</tr>'; | |
| }); | |
| // set final table contents | |
| fTable = rows; | |
| // create export to Excel | |
| var tableToExcel = (function () { | |
| var uri = 'data:application/vnd.ms-excel;base64,', | |
| template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', | |
| base64 = function (s) { | |
| return window.btoa(unescape(encodeURIComponent(s))) | |
| }, format = function (s, c) { | |
| return s.replace(/{(\w+)}/g, function (m, p) { | |
| return c[p]; | |
| }) | |
| } | |
| return function (table, name) { | |
| var ctx = { | |
| worksheet: name || 'Worksheet', | |
| table: table | |
| } | |
| console.log(ctx); | |
| window.location.href = uri + base64(format(template, ctx)) | |
| } | |
| })() | |
| tableToExcel(fTable, o.name); | |
| e.preventDefault; | |
| }); | |
| } | |
| }); | |
| })(jQuery); |
Thanks for pointing that out akilanps. I'm not sure how I missed that, and it appears there were double sets of tables being created. Since the plugin grabs the content of the entire table it is being pointed at, along with the table tags, I just removed the table tags that the plugin was creating it self. There really wasn't a need for them, and was just an oversight on my part.
Cheers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Excellent..but one doubt after export html table to xsl .in xsl have empty row in first ..how can i delete the first row in xsl after export..