使用JavaScript / JQuery将html表格数据导出到Excel在Chrome浏览中无法正常工作 [英] Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browse

问题描述

我在速度模板中有一个HTML表。我想使用java脚本或jquery，comatibale与所有浏览器将html表数据导出到excel。
我正在使用以下脚本

 < script type =text / javascript> 
函数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浏览器中测试了相同的脚本时，按预期不能正常工作，当点击按钮时，没有弹出弹出窗口。数据被下载到文件类型为file的文件中，没有扩展名，如 .xls
chrome控制台中没有错误。

Jsfiddle示例：

http：// jsfiddle .net / insin / cmewv /

这在mozilla中可以正常工作，但不能在chrome中运行。

Chrome浏览器测试用例：

第一个图像：我点击导出到excel按钮

结果：

解决方案

Excel导出脚本适用于IE7 +，Firefox和Chrome。

 函数fnExcelReport（）
 {
 var tab_text =< table border ='2px'>< tr bgcolor ='＃ 87AFC6' >中; 
 var textRange; var j = 0; 
 tab = document.getElementById（'headerTable'）; //表单
 
（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，）; //如果你想要表中的链接，删除
 tab_text = tab_text.replace（/< img [^>] *> / gi，）; //删除如果你想要你的表中的图像
 tab_text = tab_text.replace（/< input [^>] *> |< \ / input> / gi，）; // reomves input params 
 
 var ua = window.navigator.userAgent; 
 var msie = ua.indexOf（MSIE）;如果Internet Explorer 
 {
 txtArea1.document.open（txt / html，replace）; 
 txtArea1.document.write（tab_text）; 
 txtArea1.document.close（）; 
 txtArea1.focus（）; 
 sa = txtArea1.document.execCommand（SaveAs，true，说谢谢Sumit.xls）; 
} 
 else //其他浏览器未在IE 11上测试
 sa = window.open（'data：application / vnd.ms-excel''+ encodeURIComponent（tab_text））; 
 
 return（sa）; 
} 
  

只需创建一个空白iframe：

 < iframe id =txtArea1style =display：none>< / iframe> 
  

调用此功能：

 < button id =btnExportonclick =fnExcelReport（）;>出口< / button> 
  

I have a HTML table in velocity template. I want to export the html table data to excel using either java script or jquery, comatibale with all browser. 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. 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. Data gets downloaded in a file with "file type : file" , no extension like .xls There are no errors in chrome console.

Jsfiddle example :

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

This works fine in mozilla but not in chrome.

Chrome browser Test Case :

First Image:I click on Export to excel button

and result :

解决方案

Excel export script works on IE7+, Firefox and 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 id="txtArea1" style="display:none"></iframe>

Call this function on:

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

这篇关于使用JavaScript / JQuery将html表格数据导出到Excel在Chrome浏览中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！