In this article I will explain with an example, how to convert (export) HTML Table to Image using HTML5 canvas in ASP.Net MVC.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Entity Framework Model
Once the
Entity Framework is configured and connected to the database table, the Model will look as shown below.
![ASP.Net MVC: Convert (Export) HTML Table to Image using HTML5 Canvas]()
Namespaces
You will need to import the following namespace.
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
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.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 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 HTML 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.
@model IEnumerable<Table_Export_Image_MVC.Customer>
@{
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" 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 MVC: Convert (Export) HTML Table to Image using HTML5 Canvas]()
Exported Image
![ASP.Net MVC: Convert (Export) HTML Table to Image using HTML5 Canvas]()
Downloads
