In this article I will explain with an example, how to export GridView with Images from Folder (Directory) to Word, Excel and PDF formats in ASP.Net using C# and VB.Net.
Exporting GridView to Word and Excel can be easily achieved using ASP.Net without any third party tools, but for exporting to PDF iTextSharp library will be used.
This article will illustrate how to export GridView with Images to Word, Excel and PDF file along with formatting i.e. Styles and Colors in ASP.Net.
 
 
Download iTextSharp and XmlWorkerHelper Libraries
You can download the latest iTextSharp and XmlWorkerHelper libraries from the following links.
iTextSharp
XmlWorkerHelper
Note: You will need to add the reference of iTextSharp and XmlWorkerHelper libraries in your project.
 
 
Image Files Location
The image files are stored in Images Folder (Directory).
Export GridView with Images to Word Excel and PDF Formats in ASP.Net
 
 
HTML Markup
The following HTML Markup consists of:
GridView:– For displaying image files.
Columns
GridView consists of one BoundField column and an ImageField column.
Button – For exporting GridView.
The Buttons have been assigned with OnClick event handler which will perform the operation for exporting GridView to Word, Excel and PDF files.
<asp:GridView ID="gvFiles" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
    HeaderStyle-ForeColor="White" Font-Names="Arial" Font-Size="10" RowStyle-BackColor="#A1DCF2"
    AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000">
    <Columns>
        <asp:BoundField DataField="Text" HeaderText="File Name" />
        <asp:ImageField DataImageUrlField="Value" ItemStyle-Height="150" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>
<br />
<asp:Button ID="btnWord" runat="server" Text="Export To Word" OnClick="ExportToWord" Width="120" />
<asp:Button ID="btnExcel" runat="server" Text="Export To Excel" OnClick="ExportToExcel" Width="120" />
<br />
<br />
<asp:Button ID="btnPDF" runat="server" Text="Export To PDF" OnClick="ExportToPDF" Width="120" />
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Drawing;
using iTextSharp.text;
using iTextSharp.text.pdf;
using iTextSharp.tool.xml;
 
VB.Net
Imports System.IO
Imports System.Drawing
Imports iTextSharp.text
Imports iTextSharp.text.pdf
Imports iTextSharp.tool.xml
 
 
Binding the GridView with Images
In the Page Load event handler, the BindGrid method is called.
Inside the BindGrid method, the current URL of the page is fetched and stored in an object of Uri class and the URL to the Images folder is built by concatenation of the URL segments.
Then, the path of the Images are fetched from the Folder (Directory) using the GetFiles method of the Directory class.
A FOR loop is executed over the fetched paths of Image files and the Image Path is converted into an Absolute Path and then set into a generic List collection.
Note: In order to export to Word, Excel or PDF, it is important to generate the complete URL of the Image file like this http://localhost:1045/Images/Desert.jpg.
         Such URLs are known as Absolute Path and Word, Excel and PDF files will use this path to download the Image files within the application.
 
Finally, the generic List collection is used to populate the GridView with Images.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}
 
private void BindGrid()
{
    //Fetch the Current URL.
    Uri uri = Request.Url;
 
    //Generate Absolute Path for the Images folder.
    string folderUrl = string.Format("{0}://{1}{2}", uri.Scheme, uri.Authority, uri.AbsolutePath);
    folderUrl = folderUrl.Replace(Request.Url.Segments[Request.Url.Segments.Length - 1], "");
    folderUrl += "Images/";
 
    //Fetch the Images from Images Folder and generate Absolute Path.
    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));
    List<System.Web.UI.WebControls.ListItem> files = new List<System.Web.UI.WebControls.ListItem>();
    foreach (string filePath in filePaths)
    {
        string fileName = Path.GetFileName(filePath);
        files.Add(new System.Web.UI.WebControls.ListItem(fileName, string.Concat(folderUrl, fileName)));
    }
 
    //Bind the GridView.
    gvFiles.DataSource = files;
    gvFiles.DataBind();
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub
 
Private Sub BindGrid()
    'Fetch the Current URL.
    Dim uri As Uri = Request.Url
 
    'Generate Absolute Path for the Images folder.
    Dim folderUrl As String = String.Format("{0}://{1}{2}", uri.Scheme, uri.Authority, uri.AbsolutePath)
    folderUrl = folderUrl.Replace(Request.Url.Segments(Request.Url.Segments.Length - 1), "")
    folderUrl += "Images/"
 
    'Fetch the Images from Images Folder and generate Absolute Path.
    Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Images/"))
    Dim files As List(Of System.Web.UI.WebControls.ListItem) = New List(Of System.Web.UI.WebControls.ListItem)()
    For Each filePath As String In filePaths
        Dim fileName As String = Path.GetFileName(filePath)
        files.Add(New System.Web.UI.WebControls.ListItem(fileName, String.Concat(folderUrl, fileName)))
    Next
 
    'Bind the GridView.
    gvFiles.DataSource = files
    gvFiles.DataBind()
End Sub
 
 
Exporting GridView with Images to Word document with Formatting
When the Export Button is clicked,the Response class properties are set.
1. Content-Disposition – It is a response header indicating, the download file is an attachment and allows setting the file name.
Note: For more details on Content-Disposition header, please refer What is Content Disposition Header in ASP.Net.
 
2. ContentType – It informs the Browser about the file type. In this case it is Word document.
 
Next, the StringWriter and HtmlTextWriter class objects are created and the Paging is disabled for the GridView by setting the AllowPaging property to false and the GridView is again populated with images fetched from the Images Folder (Directory) by making call to the BindGrid method.
Then, a FOR EACH loop is executed over the GridView rows and the style and formatting are applied to the Header Row and Alternating Row of the GridView control.
Finally, StringWriter object is written to the Response which initiates the File download operation.
C#
protected void ExportToWord(object sender, EventArgs e)
{
    Response.Clear();
    Response.Buffer = true;
    Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.doc");
    Response.Charset = "";
    Response.ContentType = "application/vnd.ms-word";
    using (StringWriter sw = new StringWriter())
    {
        HtmlTextWriter hw = new HtmlTextWriter(sw);
 
        //To Export all pages.
        gvFiles.AllowPaging = false;
        this.BindGrid();
 
        gvFiles.HeaderRow.BackColor = Color.White;
        foreach (TableCell cell in gvFiles.HeaderRow.Cells)
        {
            cell.BackColor = gvFiles.HeaderStyle.BackColor;
        }
        foreach (GridViewRow row in gvFiles.Rows)
        {
            row.BackColor = Color.White;
            foreach (TableCell cell in row.Cells)
            {
                if (row.RowIndex % 2 == 0)
                {
                    cell.BackColor = gvFiles.AlternatingRowStyle.BackColor;
                }
                else
                {
                    cell.BackColor = gvFiles.RowStyle.BackColor;
                }
            }
        }
 
        gvFiles.RenderControl(hw);
 
        Response.Output.Write(sw.ToString());
        Response.Flush();
        Response.End();
    }
}
 
VB.Net
Protected Sub ExportToWord(ByVal sender As Object, ByVal e As EventArgs)
    Response.Clear()
    Response.Buffer = True
    Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.doc")
    Response.Charset = ""
    Response.ContentType = "application/vnd.ms-word"
 
    Using sw As StringWriter = New StringWriter()
        Dim hw As HtmlTextWriter = New HtmlTextWriter(sw)
 
        'To Export all pages.
        gvFiles.AllowPaging = False
        Me.BindGrid()
 
        gvFiles.HeaderRow.BackColor = Color.White
        For Each cell As TableCell In gvFiles.HeaderRow.Cells
            cell.BackColor = gvFiles.HeaderStyle.BackColor
        Next
        For Each row As GridViewRow In gvFiles.Rows
            row.BackColor = Color.White
            For Each cell As TableCell In row.Cells
                If row.RowIndex Mod 2 = 0 Then
                    cell.BackColor = gvFiles.AlternatingRowStyle.BackColor
                Else
                    cell.BackColor = gvFiles.RowStyle.BackColor
                End If
            Next
        Next
 
        gvFiles.RenderControl(hw)
 
        Response.Output.Write(sw.ToString())
        Response.Flush()
        Response.End()
    End Using
End Sub
 
 
Exporting GridView with Images to Excel with Formatting
When the Export Button is clicked,the Response class properties are set.
1. Content-Disposition – It is a response header indicating, the download file is an attachment and allows setting the file name.
Note: For more details on Content-Disposition header, please refer What is Content Disposition Header in ASP.Net.
 
2. ContentType – It informs the Browser about the file type. In this case it is Excel file.
 
Next, the StringWriter and HtmlTextWriter class objects are created and the Paging is disabled for the GridView by setting the AllowPaging property to false and the GridView is again populated with images fetched from the Images Folder (Directory) by making call to the BindGrid method.
Then, a FOR EACH loop is executed over the GridView rows and the style and formatting are applied to the Header Row and Alternating Row of the GridView control.
Note: The colors are applied to individual cell of each Row and not to the whole Row as if this is not done then the color will spread on all cells of the Excel sheet.
 
Finally, StringWriter object is written to the Response which initiates the File download operation.
C#
protected void ExportToExcel(object sender, EventArgs e)
{
    Response.Clear();
    Response.Buffer = true;
    Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.xls");
    Response.Charset = "";
    Response.ContentType = "application/vnd.ms-excel";
    using (StringWriter sw = new StringWriter())
    {
        HtmlTextWriter hw = new HtmlTextWriter(sw);
 
        //To Export all pages.
        gvFiles.AllowPaging = false;
        this.BindGrid();
 
        gvFiles.HeaderRow.BackColor = Color.White;
        foreach (TableCell cell in gvFiles.HeaderRow.Cells)
        {
            cell.BackColor = gvFiles.HeaderStyle.BackColor;
        }
        foreach (GridViewRow row in gvFiles.Rows)
        {
            row.BackColor = Color.White;
            foreach (TableCell cell in row.Cells)
            {
                if (row.RowIndex % 2 == 0)
                {
                    cell.BackColor = gvFiles.AlternatingRowStyle.BackColor;
                }
                else
                {
                    cell.BackColor = gvFiles.RowStyle.BackColor;
                }
            }
        }
 
        gvFiles.RenderControl(hw);
 
        Response.Output.Write(sw.ToString());
        Response.Flush();
        Response.End();
    }
}
 
VB.Net
Protected Sub ExportToExcel(sender As Object, e As EventArgs)
    Response.Clear()
    Response.Buffer = True
    Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.xls")
    Response.Charset = ""
    Response.ContentType = "application/vnd.ms-excel"
    Using sw As StringWriter = New StringWriter()
        Dim hw As HtmlTextWriter = New HtmlTextWriter(sw)
 
       'To Export all pages.
        gvFiles.AllowPaging = False
        Me.BindGrid()
 
        gvFiles.HeaderRow.BackColor = Color.White
        For Each cell As TableCell In gvFiles.HeaderRow.Cells
            cell.BackColor = gvFiles.HeaderStyle.BackColor
        Next
        For Each row As GridViewRow In gvFiles.Rows
            row.BackColor = Color.White
            For Each cell As TableCell In row.Cells
                If row.RowIndex Mod 2 = 0 Then
                    cell.BackColor = gvFiles.AlternatingRowStyle.BackColor
                Else
                    cell.BackColor = gvFiles.RowStyle.BackColor
                End If
            Next
        Next
 
        gvFiles.RenderControl(hw)
 
        Response.Output.Write(sw.ToString())
        Response.Flush()
        Response.End()
    End Using
End Sub
 
 
Exporting GridView with Images to PDF with Formatting
When the Export Button is clicked,the Response class properties are set.
1. Content-Disposition – It is a response header indicating, the download file is an attachment and allows setting the file name.
Note: For more details on Content-Disposition header, please refer What is Content Disposition Header in ASP.Net.
 
2. ContentType – It informs the Browser about the file type. In this case it is PDF.
 
The Paging is disabled for the GridView by setting the AllowPaging property to false and the GridView is again populated with images fetched from the Images Folder (Directory) by making call to the BindGrid method.
Next, the GridView is rendered into an HTML string using HtmlTextWriter and then, the generated HTML is added to the iTextSharp PDF document using Document class.
After that, the PDF document is opened and the GridView data is written using ParseXHtml method of XmlWorkerHelper class.
Finally, StringWriter object is written to the Response which initiates the File download operation.
C#
protected void ExportToPDF(object sender, EventArgs e)
{
    Response.Clear();
    Response.Buffer = true;
    Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.pdf");
    Response.Charset = "";
    Response.ContentType = "application/pdf";
 
    //To Export all pages.
    gvFiles.AllowPaging = false;
    this.BindGrid();
 
    using (StringWriter sw = new StringWriter())
    {
        using (HtmlTextWriter hw = new HtmlTextWriter(sw))
        {
            gvFiles.RenderControl(hw);
            using (StringReader sr = new StringReader(sw.ToString()))
            {
                using (Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 0f))
                {
                    using (PdfWriter writer = PdfWriter.GetInstance(pdfDoc, Response.OutputStream))
                    {
                        pdfDoc.Open();
                        XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr);
                        pdfDoc.Close();
                        Response.Cache.SetCacheability(HttpCacheability.NoCache);
                        Response.Write(pdfDoc);
                        Response.End();
                    }
                }
            }
        }
    }
}
 
VB.Net
Protected Sub ExportToPDF(ByVal sender As Object, ByVal e As EventArgs)
    Response.Clear()
    Response.Buffer = True
    Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.pdf")
    Response.Charset = ""
    Response.ContentType = "application/pdf"
 
    'To Export all pages.
    gvFiles.AllowPaging = False
    Me.BindGrid()
 
    Using sw As StringWriter = New StringWriter()
        Using hw As HtmlTextWriter = New HtmlTextWriter(sw)
            gvFiles.RenderControl(hw)
            Using sr As StringReader = New StringReader(sw.ToString())
                Using pdfDoc As Document = New Document(PageSize.A4, 10.0F, 10.0F, 10.0F, 0.0F)
                    Using writer As PdfWriter = PdfWriter.GetInstance(pdfDoc, Response.OutputStream)
                        pdfDoc.Open()
                        XMLWorkerHelper.GetInstance().ParseXHtml(writer, pdfDoc, sr)
                        pdfDoc.Close()
                        Response.Cache.SetCacheability(HttpCacheability.NoCache)
                        Response.Write(pdfDoc)
                        Response.End()
                    End Using
                End Using
            End Using
        End Using
    End Using
End Sub
 
 
Error
The following error occurs when you run the application first time and click on export you might receive the following error.
Server Error in '/ASP.Net' Application.

Control 'GridView1' of type 'GridView' must be placed inside a form tag with runat=server.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: Control 'GridView1' of type 'GridView' must be placed inside a form tag with runat=server.
 
 
Solution
The solution to the above exception is to override VerifyRenderingInServerForm event handler.
For more details please refer my article, Exception - Control GridView1 of type GridView must be placed inside a form tag with runat server.
 
 
Screenshots
Exporting GridView
Export GridView with Images to Word Excel and PDF Formats in ASP.Net
 
Exported Word Document
Export GridView with Images to Word Excel and PDF Formats in ASP.Net
 
Exported Excel file
Export GridView with Images to Word Excel and PDF Formats in ASP.Net
 
Exported PDF file
Export GridView with Images to Word Excel and PDF Formats in ASP.Net
 
 
Downloads
Download Code