將HTML表格導出爲MS Excel格式使用jQuery

我試圖關注此example。使用jQuery將HTML表格導出爲MS Excel格式。將HTML表格導出爲MS Excel格式使用jQuery

這裏是我的.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>

的.js文件（JScript2.js）：

$("#btnExport").click(function (e) { 
    window.open('data:application/vnd.ms-excel,' + $('#tbl').html()); 
    e.preventDefault(); 
});

......而隱藏代碼：

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);  
    } 
}

生成的頁面來源：

<!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>

我不知道我在做什麼錯，但是當我點擊btnExport時，沒有任何反應。我該如何解決這個問題？

來源

2012-12-21 Administrateur

把這個在您的形式

<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>

將這個頭部段與腳本標籤

$(document).ready(function() { 
     $("#btnExport").click(function (e) { 
      window.open('data:application/vnd.ms-excel,' + $('#container').html()); 
      e.preventDefault(); 
     }); 
    });

來源

2012-12-21 23:26:16

我相信你的代碼沒有什麼問題，只是因爲你的代碼是asp.net。你不能直接使用$（'＃tbl'）。你必須使用$（「＃」 + '<％= tbl.ClientID％>'）

來源

2012-12-21 22:26:23

嘗試了您的建議，但沒有奏效... – Administrateur

在Internet Explorer中瀏覽您的頁面，然後查看源代碼，將其複製並粘貼到此處。 –

編輯該問題以包含生成的頁面源代碼。 – Administrateur

將HTML表格導出爲MS Excel格式使用jQuery

回答

相關問題