Javascript Export Html Table To CSV/XLS
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
Html table to excel or csv ---With export for IE and Edge
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.
DEMO | DOWNLOAD
This awesome script developed by kostas-krevatas. Visit their official repository for more information and follow for future updates.
