In this article I will explain with an example, how to convert (export) WebGrid to Image using HTML5 canvas in ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

html2canvas plugin

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

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 

Entity Framework Model

Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
ASP.Net MVC: Convert (Export) WebGrid to Image using HTML5 Canvas
 
 

Namespaces

You will need to import the following namespace.
using System.Linq;
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, the records are fetched from the Customers Table using Entity Framework and returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View(entities.Customers.ToList());
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Customer class is declared as Model for the View.
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer class object as source.
Then, the WebGrid is created using the GetHtml method with the following parameters.
HtmlAttributes – It is used to set the HTML attributes to the HTML Table generated by WebGrid such as ID, Name, Class, etc.
Columns – It is used to specify the columns to be displayed in WebGrid and also allows to set specific Header Text for the columns.
Note: If the columns are not specified then WebGrid will display all columns supplied by its source. It is very similar to the AutoGenerateColumns feature of the ASP.Net GridView.
 
The View also consists of an HTML INPUT Button.
 
Inside the View, the following script file is inherited:
1. jquery.min.js
2. html2canvas.min.js
 

Converting WebGrid to Image using HTML5 Canvas

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 WebGrid 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 initiates the file download operation.
@modelIEnumerable<WebGrid_EF_MVC.Customer>
 
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @webGrid.GetHtml(
         htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
         columns: webGrid.Columns(
                 webGrid.Column("CustomerID", "Customer Id"),
                 webGrid.Column("ContactName", "Contact Name"),
                 webGrid.Column("City", "City"),
                 webGrid.Column("Country", "Country")))
 
    <br />
    <input type="button" id="btnExport" value="Export to Image" />
 
    <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($("#WebGrid")[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>
</body>
</html>
 
 

CSS Class

The following CSS class are used to sort the GridView.
<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    .Grid { border: 1px solid #ccc; border-collapse: collapse; }
    .Grid th { background-color: #F7F7F7; font-weight:bold; }
    .Grid th,.Grid td { padding: 5px; border: 1px solid #ccc; }
    .Grid, .Grid table td { border: 0px solid #ccc; }
    .Grid th a, .Grid th a:visited { color: #333; }
</style>
 
 

Screenshots

ASP.Net MVC: Convert (Export) WebGrid to Image using HTML5 Canvas
 

Exported Image

ASP.Net MVC: Convert (Export) WebGrid to Image using HTML5 Canvas
 
 

Downloads

Download Code


Other available versions