使用 JavaScript / JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作

Question

我在速度模板中有一个 HTML 表格。我想使用 java 脚本或 jquery 将 html 表数据导出到 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 中运行良好，它会弹出一个 excel 对话框并询问打开或保存选项。但是当我在 Chrome 浏览器中测试相同的脚本时，它没有按预期工作，当单击按钮时没有弹出 excel。数据被下载到具有“文件类型：文件”的文件中，没有像 .xls 这样的扩展名 chrome 控制台中没有错误。

Jsfiddle 示例：

http://jsfiddle.net/insin/cmewv/

这在 Mozilla 中可以正常工作，但在 chrome 中不行。

Chrome 浏览器测试用例：

第一张图片：我点击导出到excel按钮

结果：

原文由 Sukane 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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);
}

只需创建一个空白 iframe：

<iframe id="txtArea1" style="display:none"></iframe>

调用此函数：

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

原文由 sampopes 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Datatable 插件最好地解决了这个问题，允许我们将 HTML 表格数据导出为 Excel、PDF、TEXT。易于配置。

请在下面的数据表参考链接中找到完整的示例：

https://datatables.net/extensions/buttons/examples/html5/simple.html

（数据表参考网站的截图）

原文由 Aditya 发布，翻译遵循 CC BY-SA 3.0 许可协议