Introduction:
Here I will explain how to export gridview data with images to excel or word file formats in asp.net using c#, vb.net with example or export gridview with image to word or excel file in asp.net using c#, vb.net with example.
Description:
In previous articles I explained create single stored procedure to insert, update, delete and select in sql server, bind gridview with datatable dynamically in asp.net, show images from folder with image path in database in asp.net, gridview examples in asp.net, Delete multiple rows in gridview using checkbox in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to export gridview data with images to excel or word file formats in asp.net using c#, vb.net with example.
In previous articles I explained create single stored procedure to insert, update, delete and select in sql server, bind gridview with datatable dynamically in asp.net, show images from folder with image path in database in asp.net, gridview examples in asp.net, Delete multiple rows in gridview using checkbox in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to export gridview data with images to excel or word file formats in asp.net using c#, vb.net with example.
To
export gridview data with images to
excel or word file in asp.net open your aspx page
and write the following code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Export Gridview with
Images in Asp.net</title>
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida
Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif;
color: #303933;}
.headerstyle
{
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color:
#df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div class="GridviewDiv">
<asp:GridView ID="gvDetails"
CssClass="Gridview"
runat="server"
AutoGenerateColumns="False">
<HeaderStyle CssClass="headerstyle"
/>
<Columns>
<asp:BoundField HeaderText="User
Id" DataField="UserId" />
<asp:BoundField HeaderText="User
Name" DataField="UserName" />
<asp:BoundField HeaderText="Education"
DataField="Education"
/>
<asp:ImageField DataImageUrlField="Imagepath" HeaderText="Image" ItemStyle-Height="25px" ItemStyle-Width="25px" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnExport"
runat="server"
Text="Export
Data"
onclick="btnExport_Click" />
</div>
</form>
</body>
</html>
|
After completion of aspx page add following namespaces in
codebehind
C#
Code
using System;
using System.Data;
using System.Web.UI;
using System.IO
|
After completion of adding namespaces you need to write the
code like as shown below
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
gvDetails.DataSource = BindGridviewData();
gvDetails.DataBind();
}
}
public override void
VerifyRenderingInServerForm(Control
control)
{
}
/// <summary>
///
Dynamically create & bind data to gridview
/// </summary>
protected DataTable BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId",
typeof(Int32));
dt.Columns.Add("UserName",
typeof(string));
dt.Columns.Add("Education",
typeof(string));
dt.Columns.Add("Imagepath",
typeof(string));
dt.Rows.Add(1, "Suresh
Dasari", "B.Tech", "http://localhost:50157/Blog
Samples/uploads/Sign1.jpg");
dt.Rows.Add(2, "Rohini
Dasari", "Msc", "http://localhost:50157/Blog
Samples/uploads/Signature.jpg");
dt.Rows.Add(3, "Madhav Sai",
"MS","");
dt.Rows.Add(4, "Praveen",
"B.Tech","");
dt.Rows.Add(6, "Sateesh",
"MD","");
dt.Rows.Add(7, "Mahesh
Dasari", "B.Tech","http://localhost:50157/Blog
Samples/uploads/Mahesh_sign.jpg");
dt.Rows.Add(8, "Mahendra",
"CA","");
return dt;
}
protected void btnExport_Click(object
sender, EventArgs e)
{
Response.ClearContent();
Response.Buffer = true;
Response.AddHeader("content-disposition",
string.Format("attachment;
filename={0}", "Employees.xls"));
Response.ContentType = "application/ms-excel";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
gvDetails.AllowPaging = false;
gvDetails.DataSource = BindGridviewData();
gvDetails.DataBind();
//Change the Header Row back to white color
gvDetails.HeaderRow.Style.Add("background-color",
"#FFFFFF");
//Applying stlye to gridview header cells
for (int i = 0; i < gvDetails.HeaderRow.Cells.Count;
i++)
{
gvDetails.HeaderRow.Cells[i].Style.Add("background-color",
"#df5015");
}
gvDetails.RenderControl(htw);
Response.Write(sw.ToString());
Response.End();
}
|
VB.NET
Code
Imports System.Data
Imports System.Web.UI
Imports System.IO
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As EventArgs) Handles
Me.Load
If Not
IsPostBack Then
gvDetails.DataSource = BindGridviewData()
gvDetails.DataBind()
End If
End Sub
Public Overrides Sub
VerifyRenderingInServerForm(ByVal control As Control)
End Sub
''' <summary>
''' Dynamically create & bind data to gridview
''' </summary>
Protected Function BindGridviewData() As DataTable
Dim dt As New DataTable()
dt.Columns.Add("UserId",
GetType(Int32))
dt.Columns.Add("UserName",
GetType(String))
dt.Columns.Add("Education",
GetType(String))
dt.Columns.Add("Imagepath",
GetType(String))
dt.Rows.Add(1, "Suresh
Dasari", "B.Tech", "http://localhost:50157/Blog
Samples/uploads/Sign1.jpg")
dt.Rows.Add(2, "Rohini
Dasari", "Msc", "http://localhost:50157/Blog
Samples/uploads/Signature.jpg")
dt.Rows.Add(3, "Madhav Sai",
"MS", "")
dt.Rows.Add(4, "Praveen",
"B.Tech", "")
dt.Rows.Add(6, "Sateesh",
"MD", "")
dt.Rows.Add(7, "Mahesh
Dasari", "B.Tech", "http://localhost:50157/Blog
Samples/uploads/Mahesh_sign.jpg")
dt.Rows.Add(8, "Mahendra",
"CA", "")
Return dt
End Function
Protected Sub btnExport_Click(ByVal
sender As Object,
ByVal e As EventArgs)
Response.ClearContent()
Response.Buffer = True
Response.AddHeader("content-disposition",
String.Format("attachment;
filename={0}", "Employees.xls"))
Response.ContentType = "application/ms-excel"
Dim sw As New StringWriter()
Dim htw As New HtmlTextWriter(sw)
gvDetails.AllowPaging = False
gvDetails.DataSource = BindGridviewData()
gvDetails.DataBind()
'Change the Header Row back to white color
gvDetails.HeaderRow.Style.Add("background-color",
"#FFFFFF")
'Applying stlye to gridview header cells
For i As Integer = 0 To gvDetails.HeaderRow.Cells.Count - 1
gvDetails.HeaderRow.Cells(i).Style.Add("background-color",
"#df5015")
Next
gvDetails.RenderControl(htw)
Response.Write(sw.ToString())
Response.[End]()
End Sub
End Class
|
Demo
 |
Once we export data to excel that would be like as shown below
 |
If you want to export data to word file please change Response.AddHeader and Response.ContentType
like as shown below
Export to Word
Response.AddHeader("content-disposition",
string.Format("attachment;
filename={0}", "Employees.doc"));
Response.ContentType = "application/ms-word";
|
once we export data to word that would be like as shown below
 |
Download
Sample Code Attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
This is a nice post, please how do i set the height and width of the image in excel
how to set the height and width of image while exporting from gridview to word, i want small image in ms word
This does not work
Note: Only a member of this blog may post a comment.