In this tutorial you will learn how to export dynamically data from div to excel in asp.net using jquery and c#. I have already written a tutorial that teaches how to export div data to excel. Couple of days ago, one of my friends asked me to solve his problem and his problem was exporting div data to excel. I asked him to go to the above mentioned tutorial, get and use that code, it will solve your problem but when he tried, he failed to export div data to excel. He informed me that the code is not working. I was very surprised after hearing that and when I checked his code and found that the data inside the div was coming from database, it means div was populating dynamically. When I put some static data to div and tried to export then it was all OK, at that time it came in my knowledge that my code is not exporting dynamic data from div to excel. So to overcome this problem, I have applied another logic and became successful to export dynamically data from div to excel. Let's have a look over my .aspx page

Export dynamic data from div to excel in asp.net using jquery and c#

export-dynamic-data-from-div-to-excel.aspx
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
function ExportDivDataToExcel()
{
var html = $("#divExport").html();
html = $.trim(html);
html = html.replace(/>/g,'&gt;');
html = html.replace(/</g,'&lt;');
$("input[id$='HdnValue']").val(html);
}
</script>
<div id="divExport">
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="#FFECF5"><strong>id</strong></td>
<td align="left" valign="top" bgcolor="#FFECF5"><strong>Name</strong></td>
<td align="left" valign="top" bgcolor="#FFECF5"><strong>Birth Date</strong></td>
<td align="left" valign="top" bgcolor="#FFECF5"><strong>Gender</strong></td>
</tr>
<tr>
<td align="left" valign="top">1</td>
<td align="left" valign="top">Adeel Fakhar</td>
<td align="left" valign="top">15/10/1984</td>
<td align="left" valign="top">male
</td>
</tr>
<tr>
<td align="left" valign="top">2</td>
<td align="left" valign="top">Omer Fakhar</td>
<td align="left" valign="top">01/09/1986</td>
<td align="left" valign="top">male</td>
</tr>
</table>
</div><br/>
<asp:HiddenField ID="HdnValue" runat="server" />
</form>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Export to Excel" OnClientClick="ExportDivDataToExcel()"/>

Let's suppose the table inside the div is populated dynamically from database. You may use<asp:GridView> inside div, it is up to you. Now let's have a look over the hidden field just before the </form>. Using that hidden field I am exporting dynamically div data to excel. In javascript custom function, i am using jquery to get all the inner html of the div, removing all the extra spaces by using built-in jquery trim() function and then replacing > to &gt; and < to &lt; so that data can be transfer to server without any html injection. After replacing the > to &gt; and < to &lt; I am storing all the div data to hidden field and when focus will go to server side then the function ExportToExcel() will export the div data to excel. ExportToExcel() function is self explanatory. In this function I am converting &gt; back to > and &lt; back to < and using Response.Header all the data is being exported to excel.

.cs
protected void Button1_Click(object sender, EventArgs e)
{
string html = HdnValue.Value;
ExportToExcel(ref html, "MyReport");
}


public void ExportToExcel(ref string html, string fileName)
{
html = html.Replace("&gt;", ">");
html = html.Replace("&lt;", "<");
HttpContext.Current.Response.ClearContent();
HttpContext.Current.Response.AddHeader("content-disposition", "attachment;filename=" + fileName + "_" + DateTime.Now.ToString("M_dd_yyyy_H_M_s") + ".xls");
HttpContext.Current.Response.ContentType = "application/xls";
HttpContext.Current.Response.Write(html);
HttpContext.Current.Response.End();
}
So this is the proper way to export dynamic data from div to excel in asp.net using jquery and c#.