javascript - 使用JavaScript将HTML表格数据导出到Excel / jQuery在chrome浏览器中无法正常工作(Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser)

Question

I have a HTML table in velocity template.

(我在力度模板中有一个HTML表。)

I want to export the html table data to excel using either java script or jquery, comatibale with all browser.

(我想使用Java脚本或jquery将html表格数据导出到excel，并与所有浏览器兼容。)

I am using below script

(我正在使用以下脚本)

<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>

This script works fine in Mozilla Firefox ,it pops-up with a dialog box of excel and ask for open or save options.

(该脚本可以在Mozilla Firefox中正常运行 ，它会弹出一个excel对话框，并询问打开或保存选项。)

But when I tested same script in Chrome browser it is not working as expected,when clicked on button there is no pop-up for excel.

(但是，当我在Chrome浏览器中测试了相同的脚本时， 它无法按预期运行，当单击按钮时，Excel不会弹出。)

Data gets downloaded in a file with "file type : file" , no extension like .xls There are no errors in chrome console.

(数据下载到文件名为“ file type：file”的文件中，没有扩展名，例如.xls。Chrome控制台中没有错误。)

Jsfiddle example :

(jsfiddle示例：)

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

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

This works fine in mozilla but not in chrome.

(在mozilla中工作正常，但在chrome中则不能。)

Chrome browser Test Case :

(Chrome浏览器测试用例：)

First Image:I click on Export to excel button

(第一张图片：我点击“导出到Excel”按钮)

and result :

(结果：)

  ask by Sukane translate from so

Answer 1

Excel export script works on IE7+, Firefox and Chrome.

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

Just create a blank iframe:

(只需创建一个空白的iframe：)

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

Call this function on:

(在以下位置调用此函数：)

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