使用JavaScript / JQuery将html表格数据导出到Excel在chrome浏览器中不能正常工作
使用JavaScript / JQuery将html表格数据导出到Excel在chrome浏览器中不能正常工作
提问于 2014-03-11 14:22:14
我在velocity模板中有一个HTML表。我想导出的html表格数据到excel使用java脚本或jquery，comatibale与所有浏览器。我正在使用下面的脚本
<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中运行良好，它弹出一个excel对话框，并询问打开或保存选项。但是当我在浏览器中测试相同的脚本时，它没有像预期的那样工作，当点击按钮时，excel没有弹出窗口。数据被下载到一个带有“文件类型:文件”的文件中，没有像.xls那样的扩展名在chrome控制台中没有错误。
Jsfiddle示例：
http://jsfiddle.net/insin/cmewv/
这在mozilla中工作得很好，但在chrome中就不行。
Chrome浏览器测试用例：
第一张图片:我点击Export to excel按钮
和结果：
回答 15
Stack Overflow用户
回答已采纳
发布于 2014-06-06 19:59:59
Excel导出脚本适用于IE7+、火狐和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);
}只需创建一个空的iframe：
<iframe id="txtArea1" style="display:none"></iframe>在以下位置调用此函数：
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>Stack Overflow用户
发布于 2016-08-04 15:35:30
Datatable插件很好地解决了这个问题，它允许我们将HTML表格数据导出为Excel、PDF、TEXT。易于配置。
请在下面的datatable参考链接中找到完整的示例：
https://datatables.net/extensions/buttons/examples/html5/simple.html
(来自datatable参考站点的屏幕截图)
Stack Overflow用户
发布于 2015-01-08 23:14:50
这可能会有所帮助
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();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22317951
复制相关文章
相似问题