In this article I will explain with an example, how to convert (export) GridView to Image using HTML5 Canvas in ASP.Net with C# and VB.Net.
 
 

html2canvas plugin

Please refer the following link for documentation for the jQuery html2canvas plugin.
https://cdnjs.com/libraries/html2canvas
 
 

HTML Markup

The HTML Markup consists of following controls:
GridView – For displaying data.
The GridView consists of three BoundField columns.
Button – For exporting GridView to image.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
<br />
<input id="btnExport"type="button"value="Export"/>
 
 

Converting GridView to Image using HTML5 Canvas

Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
2. html2canvas.min.js
 
Inside the jQuery document ready event handler, the INPUT Button has been assigned with a click event handler.
Inside this function, the html2canvas method accepts reference of the GridView and then using toDataURL method of canvas object of html2canvas library the BASE64 string is determined.
Then, an Anchor element is created and its href property is set with the BASE64 string determined earlier and target and download properties are also set.
Finally, the click function is called which initiate the file download operation.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnExport").click(function () {
            html2canvas($("[id*=gvCustomers]")[0]).then(function (canvas) {
                var base64 = canvas.toDataURL();
                var lnkDownload = document.createElement('a');
                document.body.appendChild(lnkDownload);
                lnkDownload.href = base64;
                lnkDownload.target = "_self";
                lnkDownload.download = "Grid.png";
                lnkDownload.click();
                document.body.removeChild(lnkDownload);
            });
        });
    });
</script>
 
 

Namespaces

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 

Binding the GridView using C# and VB.Net

Inside the Page_Load event handler, the GridView is populated with dynamic DataTable.
Note: For more details on how to use dynamic DataTable, please refer my article Dynamically create DataTable and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { 
                            new DataColumn("CustomerId", typeof(int)),
                            new DataColumn("Name", typeof(string)),
                            new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        gvCustomers.DataSource = dt;
        gvCustomers.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2){
                            New DataColumn("CustomerId", GetType(Integer)), 
                            New DataColumn("Name", GetType(String)), 
                            New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub
 
 

Screenshot

Convert (Export) GridView to Image using HTML5 Canvas in ASP.Net using C# and VB.Net
 

Exported Image

Convert (Export) GridView to Image using HTML5 Canvas in ASP.Net using C# and VB.Net
 
 

Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions