导出HTML表格到Excel文件
我一直在寻找一些能够做到这一点的jQuery插件。 我决定使用http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html中的那个，我尽可能地遵循了它的指示。 我一直在testing这个插件，但每次我点击button导出，没有任何反应。 该表使用PHP（从MySQL服务器提取数据）填充，下面是我现在使用的脚本。
<script> $(document).ready(function() { //activate footable jquery plugin (this is the dynamic table on the report page with search and sorting functions) $('.footable').footable(); }); //Prepare table2excel plugin (clicking the export button will send the main table to an Excel spreadsheet) $("button").click(function(){ $(".footable").table2excel({ //Exclude CSS class specific to this plugin exclude: ".noExl", name: "Excel Document Name" }); }); </script> 添加新代码后， footable显示器根本没有改变。 我能做什么？ 我一直认为我只是错误地放置了table2excel块，但即使在ready(function(){})块内部，也没有任何事情发生。
正如@charlietfl所说，你需要$(document).ready内部的.click .click()绑定，因为如果不是，当你试图绑定它时，元素不存在。
这样你就不需要使用插件
function exportGrid(gridID,filename) { var html = $('#' + gridID).html(); var a = document.createElement('a'); a.id = 'tempLink'; a.href = 'data:application/vnd.ms-excel,' + html; a.download = filename + ".xls"; document.body.appendChild(a); a.click(); // Downloads the excel document document.getElementById('tempLink').remove(); } $(document).ready(function() { $("button").click(function(){ exportGrid("TheGridId","The excel name"); }); });
在这里你有一个例子https://jsfiddle.net/0mzn7uLq/
pipe理解决它。 我最初怀疑，不把它放在就绪的function里面是一个问题，并认为它可以解决问题，但这只是问题的一部分。 我也忘了一个逗号。 完成的结果如下。
<script> $(document).ready(function() { //activate footable jquery plugin (this is the dynamic table on the report page with search and sorting functions) $('.footable').footable(); //Prepare table2excel plugin (clicking the export button will send the main table to an Excel spreadsheet) $("button.excelexport").click(function(){ $("#footable").table2excel({ //Exclude CSS class specific to this plugin exclude: ".noExl", name: "Merchandising Report", filename: "merchReportTable" }); }); }); </script>
这是您可以使用自定义文件名将HTML表格导出为excel文件的代码。 我试图在IE11，Firefox 48和铬51。
- 在HTML部分添加
<iframe id="txtArea1" style="display:none"></iframe>。- 添加一个button
<button id="btnExport" onclick="toExcel_()">Export to excel</button>，将调用函数“toExcel_（）”。
Ps：我是新来的Stackoverflow，所以请原谅我的回答格式：D
function toExcel_(){ var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>"; var textRange; var j=0; tab = document.getElementById('tblExport'); // 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>"; var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE"); var dt = new Date(); var day = dt.getDate(); var month = dt.getMonth() + 1; var year = dt.getFullYear(); var hour = dt.getHours(); var mins = dt.getMinutes(); var postfix = day + "." + month + "." + year + "_" + hour + "." + mins; 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,"Report.xls"); } else // For Chrome and firefox (Other broswers not tested) { uriContent = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text); var sa = document.createElement("a"); sa.setAttribute("href", uriContent); sa.setAttribute("download", "Report"+postfix +".xls"); document.body.appendChild(sa); // Required for FF sa.click(); } return (sa);
}
<html> <head> <script src="jquery.min.js"></script> <script src="jquery.btechco.excelexport.js"></script> <script src="jquery.base64.js"></script> <script> $(document).ready(function() { $("#btnExport").click(function() { $("#tblExport1").btechco_excelexport({ containerid: "tblExport1", datatype: $datatype.Table }); }); }); </script> </head> <body> <div id="dvd"> <table id="tblExport1" style="border:1px solid black; "> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td style='background-color:red;'>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> <tr> <td>4</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <div> <button id="btnExport">Export to excel</button> </div> </body> </html>