CODEWITHSUNDEEP
c#javascriptjqueryasp.net
Administrateur
Administrateur

Reputation: 901

Export HTML table to MS Excel Format Using jQuery

I'm trying to follow this example. To export an HTML table to MS Excel format using jQuery.

Here's my .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):

$("#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?

Upvotes: 1

Views: 11446

Answers (2)

Dan Hunex
Dan Hunex

Reputation: 5318

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

Upvotes: 1

Dan Hunex
Dan Hunex

Reputation: 5318

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%>')

Upvotes: 0

Related Questions