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

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 Table_Export_Image_Core.Models;
 
namespace Table_Export_Image_Core.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 Country { get; set; }
}
 
 

Controller

The Controller consists of following Action method.

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
{
    private DBCtx Context { get; }
 
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public IActionResult Index()
    {
        return View(this.Context.Customers.Take(10).ToList());
    }
}
 
 

View

HTML Markup

Inside the View, in the very first line the Customer class is declared as Model for the View.
The View consists of an HTML Table inside which a FOR EACH loop is executed over the Model to display the records.
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 HTML Table 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 Table 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.
@using Table_Export_Image_Core.Models
@model IEnumerable<Table_Export_Image_Core.Models.Customer>
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
      Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <table id="Grid" cellpadding="0" cellspacing="0">
        <tr>
            <th>Customer Id</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
        @foreach (Customer customer in Model)
        {
            <tr>
                <td>@customer.CustomerID</td>
                <td>@customer.ContactName</td>
                <td>@customer.Country</td>
           </tr>
        }
    </table>
    <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">
        $(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: Convert (Export) HTML Table to Image using HTML5 Canvas
 

Exported Image

ASP.Net Core: Convert (Export) HTML Table to Image using HTML5 Canvas
 
 

Downloads

Download Code