javascript 使用 jQuery 将 HTML 表格导出为 MS Excel 格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13997824/
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
Export HTML table to MS Excel Format Using jQuery
提问by Administrateur
I'm trying to follow this example. To export an HTML table to MS Excel format using jQuery.
我正在尝试遵循此示例。使用 jQuery 将 HTML 表格导出为 MS Excel 格式。
Here's my .aspx:
这是我的 .aspx：
<head runat="server">
<title></title>
<script src="Scripts/jQuery.1.8.3.js" type="text/javascript"></script>
<script src="Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Table ID="tbl" runat="server">
</asp:Table>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
</form>
</body>
The .js (JScript2.js):
.js (JScript2.js)：
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#tbl').html());
e.preventDefault();
});
... And the codebehind:
...和代码隐藏：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class JQuery_Export_To_Excel : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
TableRow tr = new TableRow();
TableCell tc = new TableCell();
tc.Text = "AAA";
tr.Cells.Add(tc);
tc = new TableCell();
tc.Text = "BBB";
tr.Cells.Add(tc);
tbl.Rows.Add(tr);
}
}
Generated page source:
生成的页面源：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="Scripts/jQuery.1.8.3.js" type="text/javascript"></script>
<script src="Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="JQuery_Export_To_Excel.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2NTA0OTEwODdkZKr9kRtjn1C5sAo2woCwfF/8uHOVcyNi1bu4OtVBNKlS" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAIdFUHUqRwMmhFieKB52uC8avDSflAS9b8PVcR1BxTTBqeDRyg6lH5NKPWh6Jt5ee2zX+bYNkguHBdZjCzKvoJa" />
</div>
<div>
<table id="tbl">
<tr>
<td>AAA</td><td>BBB</td>
</tr>
</table>
<input name="btnExport" type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
</form>
</body>
</html>
I don't know what I'm doing wrong, but when I click btnExport, nothing happens. How can I fix this problem?
我不知道我做错了什么，但是当我单击btnExport 时，没有任何反应。我该如何解决这个问题？
采纳答案by Dan Hunex
put this in your form
把这个放在你的表格里
<div>
<div id="container">
<asp:Table ID="tbl" runat="server">
</asp:Table>
</div>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</div>
Put this in the header section with script tag
将此放在带有脚本标记的标题部分
$(document).ready(function () {
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $('#container').html());
e.preventDefault();
});
});
回答by Dan Hunex
I believe nothing is wrong with your code except that since your code is asp.net. you cannot directly use $('#tbl') . You have to use $("#" +'<%=tbl.ClientID%>')
我相信您的代码没有任何问题，只是因为您的代码是 asp.net。您不能直接使用 $('#tbl') 。你必须使用 $("#" +'<%=tbl.ClientID%>')
