javascript 使用javascript将HTML表格导出到excel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23450419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 00:54:42 来源:igfitidea点击:
Exporting HTML table into excel using javascript
提问by Dinesh
I have table with 4 columns where every column includes text field and button and at the end of every row consists of edit and delete button. I want to export the table into excel format but when I do the text field and button at the column header and edit and delete button are also getting exported into excel file which I dont want. Can any one tell me where I am making the mistake in javascript, please.
我有 4 列的表格，其中每一列都包含文本字段和按钮，并且在每一行的末尾包含编辑和删除按钮。我想将表格导出为 excel 格式，但是当我在列标题处执行文本字段和按钮时，编辑和删除按钮也被导出到我不想要的 excel 文件中。任何人都可以告诉我我在 javascript 中哪里出错了，请。
Here is my jquery code which I got it from net (http://jsfiddle.net/insin/cmewv/)
这是我从网上得到的 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>
my HTML code as follows
我的 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>
回答by Samuel
Try set tag that have a buttons and a edit text with a class to indentify this dom′s ex.: Class='ignore'. After this clone this yout table and in table cloned remove all dom's that have class that you seted. After removed this dom′s pass the cloned table to function that will export to excel.
尝试设置具有按钮和带有类的编辑文本的标签，以识别此 dom 的示例：Class='ignore'。在克隆这个表之后，在克隆的表中删除所有具有您设置的类的 dom。删除此 dom 后，将克隆的表传递给将导出到 excel 的函数。
Edit -------
编辑 - - - -
Try this.
试试这个。
js script
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 example
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>
