Is there any way to export html table into Excel working in all browsers?
Question
I used below code for that but its works only in Firefox. It also not allow customize exported file name. It takes a random file name.
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" ><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, filename) {
var OriginalHTML = $('#' + table + '').html();
if (!table.nodeType) {
table = document.getElementById(table);
$(table).find(".EditColumns").remove();
}
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
$(table).html(OriginalHTML);
//window.location.href = uri + base64(format(template, ctx))
document.getElementById("aExportTable").href = uri + base64(format(template, ctx));
document.getElementById("aExportTable").download = filename;
document.getElementById("aExportTable").click();
HighlightSelectedRow();
}
})();
3 answers
solution1
2 2014-11-19 16:00:24
The following code worked perfect for me with IE8+, Chrome and Firefox! It´s the easiest way to Export HTML tables to Excel without using a blob, ActiveX-Elements or downloadify:
Just insert an empty Iframe in your HTML document:
<iframe id="txtArea1" style="display:none"></iframe>
Add the following function to your Script section and replace the table id:
function fnExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('headerTable'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
and finally call the function:
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
or with JQuery:
$("#btnExport").click(function () {
fnExcelReport();
});
solution2
1 ACCPTED 2013-11-18 13:07:46
Try a blob . Should work in IE10+, Chrome/Safari and Fx
window.URL = window.URL || window.webkitURL;
var blob = new Blob([format(template, ctx)]); // format is part of OP's code
var blobURL = window.URL.createObjectURL(blob);
if (blobURL) {
$("<a/>")
.attr("href", blobURL)
.attr("download", fileName)
.text("Download "+fileName+" for import")
.appendTo('#downloadLink');
}
else {
$("#downloadLink").html("Please cut and paste from the table below");
}
solution3
0 2013-11-18 13:04:47
The Firefox supports the HTML 5 feature data-uri here data:application
If you want to make it work across all browsers, better do it in server side and set the response ContentType accordingly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.