Description:
In this example we explain that how to export HTML string to Excel
using jQuery in asp.net,previousaly we already explain that how to export
webform or Gridview data to excel in asp.net but here we export the data to
excel using jQuery at clienside.
So to how to export the data at client side rather than server
side or without any postback.so here we demonstrate how to export HTML string
to Microsoft Excel file using jQuery in asp.net.
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="Export.aspx.cs" Inherits="Export" %>
<!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 runat="server">
<title>Export
HTML string to Excel file using jQuery</title>
</head>
<body>
<form id="form1" runat="server">
<div
id="EmployeeGrid">
<table cellspacing="0" cellpadding="2" style="border-collapse: collapse;border: 1px solid #ccc;font-size: 9pt;">
<tr>
<th style="background-color: #B8DBFD;border: 1px solid #ccc">Employee Id</th>
<th style="background-color: #B8DBFD;border: 1px solid #ccc">Name</th>
<th style="background-color: #B8DBFD;border: 1px solid #ccc">Designation</th>
</tr>
<tr>
<td style="width:120px;border: 1px solid #ccc">DKK1</td>
<td style="width:150px;border: 1px solid #ccc">Kirit Patel</td>
<td style="width:120px;border: 1px solid #ccc">Software Developer</td>
</tr>
<tr>
<td style="width:120px;border: 1px solid #ccc">DGP2</td>
<td style="width:150px;border: 1px solid #ccc">Pintu Patel</td>
<td style="width:120px;border: 1px solid #ccc">QA</td>
</tr>
<tr>
<td style="width:120px;border: 1px solid #ccc">SAC3</td>
<td style="width:150px;border: 1px solid #ccc">Umesh Adroja</td>
<td style="width:120px;border: 1px solid #ccc">Consultant</td>
</tr>
</table>
</div>
<br />
<asp:HiddenField ID="hdnEmployeeGridHtml"
runat="server"
/>
<asp:Button ID="btnExportDataToExcel"
runat="server"
Text="Export To
Excel" OnClick="ExportDataToExcel" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function
() {
$("[id*=btnExportDataToExcel]").click(function () {
$("[id*=hdnEmployeeGridHtml]").val($("#EmployeeGrid").html());
});
});
</script> </form>
</body>
</html>
Export.aspx.cs:
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
public partial class Export : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void ExportDataToExcel(object
sender, EventArgs e)
{
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", "attachment;filename=HTML.xls");
Response.Charset = "";
Response.ContentType = "application/vnd.ms-excel";
Response.Output.Write(Request.Form[hdnEmployeeGridHtml.UniqueID]);
Response.Flush();
Response.End();
}
}
0 comments:
Post a Comment