Do you want to add quick table export feature into CSV, XLS format if yes then in this post I am going to share simple javascript script to export html table to excel. This is useful for adding quick excel export feature.
HTML
> Test1: <button id="btnExport" onclick="javascript:xport.toXLS('testTable');"> Export to XLS> > Export the table to XLS with CSV fallback for IE & Edge> Test 2: <button id="btnExport" onclick="javascript:xport.toCSV('testTable');"> Export to CSV> > Export the table to CSV for all browsers> Test3: <button id="btnExport" onclick="javascript:xport.toXLS('testTable', 'outputdata');"> Export to XLS> > Export the table to XLS with custom filename> |
>
Test1: Export the table to XLS with CSV fallback for IE & Edge
Test 2: Export the table to CSV for all browsers
Test3: Export the table to XLS with custom filename
Code-Page ID |
Name | ACP | OEMCP | Windows NT 3.1 |
Windows NT 3.51 |
Windows 95 |
---|---|---|---|---|---|---|
1200 | Windows 3.11 | X | X | * | ||
1250 | Windows 3.1 Eastern European | X | X | X | X | |
1251 | Windows 3.1 Cyrillic | X | X | X | X | |
1252 | Windows 3.1 US (ANSI) | X | X | X | X | |
1253 | Windows 3.1 Greek | X | X | X | X | |
1254 | Windows 3.1 Turkish | X | X | X | X | |
1255 | Hebrew | X | X | |||
1256 | Arabic | X | X | |||
1257 | Baltic | X | X | |||
1361 | Korean (Johab) | X | ** | X | ||
437 | MS-DOS United States | X | X | X | X | |
708 | Arabic (ASMO 708) | X | X | |||
709 | Arabic (ASMO 449+, BCON V4) | X | X | |||
710 | Arabic (Transparent Arabic) | X | X | |||
720 | Arabic (Transparent ASMO) | X | X |
Javascript
var xport = { _fallbacktoCSV: true, toXLS: function(tableId, filename) { this._filename = (typeof filename == 'undefined') ? tableId : filename; //var ieVersion = this._getMsieVersion(); //Fallback to CSV for IE & Edge if ((this._getMsieVersion() || this._isFirefox()) && this._fallbacktoCSV) { return this.toCSV(tableId); } else if (this._getMsieVersion() || this._isFirefox()) { alert("Not supported browser"); } //Other Browser can download xls var htmltable = document.getElementById(tableId); var html = htmltable.outerHTML; this._downloadAnchor("data:application/vnd.ms-excel" + encodeURIComponent(html), 'xls'); }, toCSV: function(tableId, filename) { this._filename = (typeof filename === 'undefined') ? tableId : filename; // Generate our CSV string from out HTML Table var csv = this._tableToCSV(document.getElementById(tableId)); // Create a CSV Blob var blob = new Blob([csv], { type: "text/csv" }); // Determine which approach to take for the download if (navigator.msSaveOrOpenBlob) { // Works for Internet Explorer and Microsoft Edge navigator.msSaveOrOpenBlob(blob, this._filename + ".csv"); } else { this._downloadAnchor(URL.createObjectURL(blob), 'csv'); } }, _getMsieVersion: function() { var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0) { // IE 10 or older => return version number return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10); } var trident = ua.indexOf("Trident/"); if (trident > 0) { // IE 11 => return version number var rv = ua.indexOf("rv:"); return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10); } var edge = ua.indexOf("Edge/"); if (edge > 0) { // Edge (IE 12+) => return version number return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10); } // other browser return false; }, _isFirefox: function(){ if (navigator.userAgent.indexOf("Firefox") > 0) { return 1; } return 0; }, _downloadAnchor: function(content, ext) { var anchor = document.createElement("a"); anchor.style = "display:none !important"; anchor.id = "downloadanchor"; document.body.appendChild(anchor); // If the [download] attribute is supported, try to use it if ("download" in anchor) { anchor.download = this._filename + "." + ext; } anchor.href = content; anchor.click(); anchor.remove(); }, _tableToCSV: function(table) { // We'll be co-opting `slice` to create arrays var slice = Array.prototype.slice; return slice .call(table.rows) .map(function(row) { return slice .call(row.cells) .map(function(cell) { return '"t"'.replace("t", cell.textContent); }) .join(","); }) .join("\r\n"); } }; |
See live demo and download source code.
This awesome script developed by kostas-krevatas. Visit their official repository for more information and follow for future updates.