Hi dd50957,
Please refer below sample.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-alpha.8/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertToImage(btnExport) {
html2canvas($("#pnlContent")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnExport.name, "");
});
return false;
}
</script>
<div>
<asp:Panel runat="server" ID="pnlContent" Style="width: 340px; background-color: White;
padding: 5px">
<table cellspacing="0" rules="all" border="1" style="border-collapse: collapse;">
<tr>
<th scope="col" style="width: 90px;">Customer Id</th>
<th scope="col" style="width: 120px;">Name</th>
<th scope="col" style="width: 120px;">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>
</asp:Panel>
<br />
<asp:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false"
OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" />
</div>
Code
C#
protected void ExportToImage(object sender, EventArgs e)
{
string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
Response.Clear();
Response.ContentType = "image/png";
Response.AddHeader("Content-Disposition", "attachment; filename=HTML.jpeg");
Response.Buffer = true;
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.BinaryWrite(bytes);
Response.End();
}
VB.Net
Protected Sub ExportToImage(sender As Object, e As EventArgs)
Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(",")(1)
Dim bytes As Byte() = Convert.FromBase64String(base64)
Response.Clear()
Response.ContentType = "image/png"
Response.AddHeader("Content-Disposition", "attachment; filename=HTML.jpeg")
Response.Buffer = True
Response.Cache.SetCacheability(HttpCacheability.NoCache)
Response.BinaryWrite(bytes)
Response.End()
End Sub