使用JavaScript将HTML表导出到excel
我有4列的列，其中每列包括文本字段和button，在每一行的结尾处包括编辑和删除button。 我想将表格导出为Excel格式，但是当我做文本字段和列标题button和编辑和删除button也被导出到我不想要的Excel文件。 任何人都可以告诉我，我在JavaScript的错误，请。
这是我从我的jQuery代码（ http://jsfiddle.net/insin/cmewv/ ）
<script type="text/javascript"> var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })() </script> 我的HTML代码如下
<TABLE id="table_id" class="display" align="Center" border="1px" width="80%"> <thead> <tr> <th> <b>User_ID </th></b> <form action="SearchId" method="post"> <input type="hidden" name="hiddenname" value="hidden_uid" > <input type="text" name="uid" id="uid"> <input type="submit" value="Search"> </form> <th><b>User_Name </th></b> <form action="SearchId" method="post"> <input type="text" name="uname" id="uname"> <input type="hidden" name="hiddenname" value="hidden_uname" > <input type="submit" value="Search"> </form> <th><b>Password</th></b> <form action="SearchId" method="post"> <input type="text" name="pass" id="pass"> <input type="hidden" name="hiddenname" value="hidden_pass" > <input type="submit" value="Search"> </form> <th><b>Designation</th></b> <form action="SearchId" method="post"> <input type="text" name="desig" id="desig"> <input type="hidden" name="hiddenname" value="hidden_desig" > <input type="submit" value="Search"> </form> </thead> <tbody > <%Iterator itr;%> <%List data=(List) request.getAttribute("UserData"); for(itr=data.iterator();itr.hasNext();) {%> <tr> <% String s= (String) itr.next(); %> <td><%=s %></td> <td><%=itr.next() %></td> <td><%=itr.next() %></td> <td><%=itr.next() %></td> <form id="edit" action="EditRecord" method="post" > <td><input type="hidden" name="hidden_edit" id="edit_id" value="<%=s %>"/> <input type="submit" id="myButton" value="Edit" name="edit" onclick="toggleVisibility('');"> </td> </form> <td><form id="delete" action="DeleteRecord" method="post" > <td><input type="hidden" name="hidden_delete" id="delete_id" value="<%=s %>"/> <input type="submit" value="delete" name="delete"> </td> </form></td> <%} %> </tr> </tbody> </TABLE>
尝试设置标签有一个button和一个类的编辑文本来确定这个dom's ex：Class ='忽略'。 在这个克隆之后，你在表格和表格克隆中删除所有你有类的dom的。 删除这个dom的通过克隆表的function，将出口到Excel。
编辑——-
尝试这个。
JS脚本
var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', base64 = function( s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name) { if (!table.nodeType) table = document.getElementById(table); var cln=table.cloneNode(true); var paras = cln.getElementsByClassName('ignore'); while(paras[0]) { paras[0].parentNode.removeChild(paras[0]); } var ctx = { worksheet : name || 'Worksheet', table : cln.innerHTML } window.location.href = uri + base64(format(template, ctx)) } })();
HTML例子
<input type="button" onclick="tableToExcel('testTable', 'W3C Example Table')" value="Export to Excel"> <table id="testTable" summary="Code page support in different versions of MS Windows." rules="groups" frame="hsides" border="2"> <caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption> <colgroup align="center"></colgroup> <colgroup align="left"></colgroup> <colgroup span="2" align="center"></colgroup> <colgroup span="3" align="center"></colgroup> <thead valign="top"> <tr> <th>Code-Page<br>ID </th> <th>Name</th> <th>ACP</th> <th>OEMCP</th> <th>Windows<br>NT 3.1 </th> <th>Windows<br>NT 3.51 </th> <th>Windows<br>95 </th> </tr> </thead> <tbody> <tr> <td>1200</td> <td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td> <td></td> <td></td> <td>X</td> <td>X</td> <td>*</td> </tr> <tr> <td>1250</td> <td style="font-weight: bold">Windows 3.1 Eastern European</td> <td>X</td> <td></td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>1251</td> <td>Windows 3.1 Cyrillic</td> <td>X</td> <td></td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>1252</td> <td>Windows 3.1 US (ANSI)</td> <td>X</td> <td></td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>1253</td> <td>Windows 3.1 Greek</td> <td>X</td> <td></td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>1254</td> <td>Windows 3.1 Turkish</td> <td>X</td> <td></td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr> <td>1255</td> <td>Hebrew</td> <td>X</td> <td></td> <td></td> <td></td> <td>X</td> </tr> <tr> <td>1256</td> <td>Arabic</td> <td>X</td> <td></td> <td></td> <td></td> <td>X</td> </tr> <tr> <td>1257</td> <td>Baltic</td> <td>X</td> <td></td> <td></td> <td></td> <td>X</td> </tr> <tr> <td>1361</td> <td>Korean (Johab)</td> <td>X</td> <td></td> <td></td> <td>**</td> <td>X</td> </tr> </tbody> <tbody> <tr> <td>437</td> <td>MS-DOS United States</td> <td></td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td class="ignore"><button>teste</button></td> </tr> <tr> <td>708</td> <td>Arabic (ASMO 708)</td> <td></td> <td>X</td> <td></td> <td></td> <td>X</td> <td class="ignore"><button>teste</button></td> </tr> <tr> <td>709</td> <td>Arabic (ASMO 449+, BCON V4)</td> <td></td> <td>X</td> <td></td> <td></td> <td>X</td> <td class="ignore"><button>teste</button></td> </tr> <tr> <td>710</td> <td>Arabic (Transparent Arabic)</td> <td></td> <td>X</td> <td></td> <td></td> <td>X</td> <td class="ignore"><button>teste</button></td> </tr> <tr> <td>720</td> <td>Arabic (Transparent ASMO)</td> <td></td> <td>X</td> <td></td> <td></td> <td>X</td> <td class="ignore"><button>teste</button></td> </tr> </tbody> </table>