使用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按钮

结果是:

结果

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

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和导出数据的外观。 在这里看到更多信息