使用 JavaScript/JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作 [英] Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser
问题描述
我在速度模板中有一个 HTML 表格.我想使用 java 脚本或 jquery 将 html 表数据导出到 excel,与所有浏览器兼容.我正在使用以下脚本
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>
此脚本在 Mozilla Firefox 中运行良好,它会弹出一个 excel 对话框并询问打开或保存选项.但是当我在 Chrome 浏览器中测试相同的脚本时,它没有按预期工作,当点击按钮时,没有弹出 excel.数据被下载到一个带有文件类型:文件"的文件中,没有像 .xls 这样的扩展名chrome 控制台没有错误.
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 示例:
Jsfiddle example :
http://jsfiddle.net/insin/cmewv/
这在 mozilla 中工作正常,但在 chrome 中无效.
This works fine in mozilla but not in chrome.
Chrome 浏览器测试用例:
Chrome browser Test Case :
第一张图片:我点击导出到excel按钮
First Image:I click on Export to excel button
和结果:
推荐答案
Excel 导出脚本适用于 IE7+、Firefox 和 Chrome.
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);
}
只需创建一个空白 iframe:
Just create a blank iframe:
<iframe id="txtArea1" style="display:none"></iframe>
调用此函数:
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
这篇关于使用 JavaScript/JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!