使用JavaScript / JQuery将HTML表格数据导出到Excel在Chrome浏览器中无法正常工作
速度模板中有一个HTML表格。 我想出口的HTML表格数据，以使用Java脚本或jQuery的，与所有浏览器comatibale excel。 我正在使用下面的脚本
<script type="text/javascript"> function ExportToExcel(mytblId){ var htmltable= document.getElementById('my-table-id'); var html = htmltable.outerHTML; window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html)); } </script> 这个脚本在Mozilla Firefox中工作正常，它popup一个对话框的Excel，并要求打开或保存选项。 但是，当我在Chrome浏览器中testing相同的脚本， 它不按预期工作 ，点击button时，没有popup的Excel。 数据被下载到“文件types：文件”的文件中，没有像.xls这样的扩展名。在Chrome控制台中没有错误。
Jsfiddle例子：
http://jsfiddle.net/insin/cmewv/
这在Mozilla中正常工作，但不在Chrome中。
Chrome浏览器testing用例：
第一张图片：我点击导出到excelbutton
结果是：
Excel导出脚本适用于IE7 +，Firefox和Chrome。
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); }
只需创build一个空白的iframe：
<iframe id="txtArea1" style="display:none"></iframe>
调用此function：
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
Datatable插件解决了最好的目的，并允许我们将HTML表格数据导出到Excel，PDF，TEXT。 易于configuration。
请在下面的数据表参考链接中find完整的示例：
https://datatables.net/extensions/buttons/examples/html5/simple.html
（从数据表参考站点截图） 
这可能有帮助
function exportToExcel(){ var htmls = ""; var uri = 'data:application/vnd.ms-excel;base64,'; var 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>'; var base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }; var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }; htmls = "YOUR HTML AS TABLE" var ctx = { worksheet : 'Worksheet', table : htmls } var link = document.createElement("a"); link.download = "export.xls"; link.href = uri + base64(format(template, ctx)); link.click(); }
你可以使用像ShieldUI这样的库来做到这一点。
它支持导出到XML和XLSX广泛使用的Excel格式。
更多细节在这里： http : //demos.shieldui.com/web/grid-general/export-to-excel
关于sampopes从6月6日在11:59回答：
我插入一个20px的字体大小的CSS样式来显示更大的Excel数据。 在sampopes代码中缺less主要的<tr>标签，所以我首先输出标题，而不是循环内的其他表格行。
function fnExcelReport() { var tab_text = '<table border="1px" style="font-size:20px" ">'; var textRange; var j = 0; var tab = document.getElementById('DataTableId'); // id of table var lines = tab.rows.length; // the first headline of the table if (lines > 0) { tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>'; } // table data lines, loop starting from 1 for (j = 1 ; j < lines; j++) { tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</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 // console.log(tab_text); // aktivate so see the result (press F12 in browser) var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); // if Internet Explorer if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { txtArea1.document.open("txt/html","replace"); txtArea1.document.write(tab_text); txtArea1.document.close(); txtArea1.focus(); sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls"); } else // other browser not tested on IE 11 sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text)); return (sa); }
TableExport – 将HTML表格导出为xlsx，xls，csv和txt文件的简单，易于实现的库。
要使用这个库， TableExport调用TableExport构造函数：
new TableExport(document.getElementsByTagName("table")); // OR simply TableExport(document.getElementsByTagName("table")); // OR using jQuery $("table").tableExport();
可以传入其他属性以自定义表，button和导出数据的外观。 在这里看到更多信息
