In this article I will explain with an example, how to convert (Export)
HTML DIV or Table to Image using
HTML Canvas in
ASP.Net.
html2canvas plugin
Please refer the following link for documentation for the jQuery html2canvas plugin.
HTML Markup
The
HTML Markup consists of following elements:
DIV – For displaying data.
Button – For exporting data to Image.
<div id="dvTable" style="padding: 5px; width: 400px">
<u>Customer Records</u>
<br />
<br />
<table cellspacing="0" rules="all" border="1" style="border-collapse: collapse">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</table>
</div>
<br />
<input id="btnExport" type="button" value="Export to Image" />
Exporting HTML DIV 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 DIV 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.
<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($("#dvTable")[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 = "DIV.png";
lnkDownload.click();
document.body.removeChild(lnkDownload);
});
});
});
</script>
Screenshot
![Convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net]()
Exported Image
![Convert (Export) HTML DIV or Table to Image using HTML Canvas in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
