In this article I will explain with an example, how to get convert WebGrid to Image using HTML5 canvas in ASP.Net Core (.Net Core) Razor Pages.
Note: : For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article  ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
Here MVC6 Grid library is use for implementing WebGrid.
Note: For more details on how to use MVC6 Grid, please refer the article Using MVC6 Grid in ASP.Net Core Razor Pages.
 
 

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
 
 

Database Context

Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core (.Net Core 7) and Entity Framework, please refer my article ASP.Net Core 7: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
using Microsoft.EntityFrameworkCore;
using WebGrid_Export_Image_Core_Razor.Models;
 
namespace WebGrid_Export_Image_Core_Razor.Models
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<Customer> Customers { get; set; }
    }
}
 
 

Model

The Model class consists of following properties.
public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}
 
 

PageModel (Code-Behind)

The PageModel consists of following Handler method.

Handler method for handling GET operation

Inside this Handler method, the records are fetched from the Customers Table using Entity Framework and set into a public property of Generic List collection of Customers model class.
public class IndexModel : PageModel
{
    private DBCtx Context { get; }
 
    public IndexModel(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public List<Customer> Customers { get; set; }
 
    public void OnGet()
    {
        this.Customers = this.Context.Customers.Take(10).ToList();
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, 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.
Below the MVC6 WebGrid, there is an HTML Form created with following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Export.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Razor Page 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 GridView 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.
@page
@model WebGrid_Export_Image_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@using NonFactors.Mvc.Grid;
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="Grid" style="width:fit-content">
        @(Html.Grid(Model.Customers).Build(columns =>
        {
            columns.Add(model => model.CustomerID).Titled("Customer Id");
            columns.Add(model => model.ContactName).Titled("ContactName");
            columns.Add(model => model.City).Titled("City");
            columns.Add(model => model.Country).Titled("Country");
        })
        )
    </div>
    <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($("#Grid")[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>
 
 

Screenshots

ASP.Net Core Razor Pages: Convert (Export) WebGrid to Image using HTML5 Canvas
 

Exported Image

ASP.Net Core Razor Pages: Convert (Export) WebGrid to Image using HTML5 Canvas
 
 

Downloads

Download Code


Other available versions