Hi mostafasalama,
In order to export DIV to PDF you need to make use of jQuery pdfmake plugin. Then convert the PDF to byte Array and send as email attachment.
Refer below example.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
table { border: 1px solid #ccc; border-collapse: collapse; }
table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
table th, table td { padding: 5px; border: 1px solid #ccc; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="dvDetails">
<h2>Customers</h2>
<table cellspacing="0" rules="all" border="1" style="border-collapse: collapse;">
<tr>
<th scope="col">Customer Id</th>
<th scope="col">Name</th>
<th scope="col">Country</th>
</tr>
<tr>
<td style="width: 100px;">1</td>
<td style="width: 150px;">John Hammond</td>
<td style="width: 100px;">United States</td>
</tr>
<tr>
<td style="width: 100px;">2</td>
<td style="width: 150px;">Mudassar Khan</td>
<td style="width: 100px;">India</td>
</tr>
<tr>
<td style="width: 100px;">3</td>
<td style="width: 150px;">Suzanne Mathews</td>
<td style="width: 100px;">France</td>
</tr>
<tr>
<td style="width: 100px;">4</td>
<td style="width: 150px;">Robert Schidner</td>
<td style="width: 100px;">Russia</td>
</tr>
</table>
</div>
<br />
<asp:Button ID="btnSendEmail" runat="server" Text="Send Email" UseSubmitBehavior="false"
OnClick="SendEmail" OnClientClick="return ConvertToBase64(this)" />
<asp:HiddenField ID="hfDetails" runat="server" />
<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" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript">
function ConvertToBase64() {
html2canvas($("#dvDetails")[0])
.then(function (canvas) {
var docDefinition = {
content: [{
image: canvas.toDataURL(),
width: 500
}]
};
//Convert the Canvas to PDF.
var pdf = pdfMake.createPdf(docDefinition);
pdf.getBase64(function (base64) {
//Set the byte Array in HiddenField.
$("[id*=hfDetails]").val(base64);
__doPostBack(btnSendEmail.name, "");
});
});
};
</script>
</form>
</body>
</html>
Namespaces
C#
using System.IO;
using System.Net;
using System.Net.Mail;
using System.Configuration;
using System.Net.Configuration;
VB.Net
Imports System.IO
Imports System.Net
Imports System.Net.Mail
Imports System.Configuration
Imports System.Net.Configuration
Code
C#
protected void SendEmail(object sender, EventArgs e)
{
string base64 = Request.Form[hfDetails.UniqueID];
byte[] bytes = Convert.FromBase64String(base64);
SmtpSection smtpSection = (SmtpSection)ConfigurationManager.GetSection("system.net/mailSettings/smtp");
string host = smtpSection.Network.Host;
int port = smtpSection.Network.Port;
bool enableSsl = smtpSection.Network.EnableSsl;
bool defaultCredentials = smtpSection.Network.DefaultCredentials;
using (MailMessage mm = new MailMessage(smtpSection.From, "dharmendra283@gmail.com"))
{
mm.Subject = "Customer Details";
mm.Body = "Customer Attachment";
mm.Attachments.Add(new Attachment(new MemoryStream(bytes), "Customers.pdf"));
mm.IsBodyHtml = false;
using (SmtpClient smtp = new SmtpClient())
{
smtp.Host = host;
smtp.Port = port;
smtp.EnableSsl = enableSsl;
smtp.UseDefaultCredentials = defaultCredentials;
NetworkCredential networkCred = new NetworkCredential(smtpSection.Network.UserName, smtpSection.Network.Password);
smtp.Credentials = networkCred;
smtp.Send(mm);
}
}
}
VB.Net
Protected Sub SendEmail(sender As Object, e As EventArgs)
Dim base64 As String = Request.Form(hfDetails.UniqueID)
Dim bytes As Byte() = Convert.FromBase64String(base64)
Dim smtpSection As SmtpSection = CType(ConfigurationManager.GetSection("system.net/mailSettings/smtp"), SmtpSection)
Dim host As String = smtpSection.Network.Host
Dim port As Integer = smtpSection.Network.Port
Dim enableSsl As Boolean = smtpSection.Network.EnableSsl
Dim defaultCredentials As Boolean = smtpSection.Network.DefaultCredentials
Using mm As New MailMessage(smtpSection.From, "dharmendra283@gmail.com")
mm.Subject = "Customer Details"
mm.Body = "Customer Attachment"
mm.Attachments.Add(New Attachment(New MemoryStream(bytes), "Customers.pdf"))
mm.IsBodyHtml = False
Using smtp As New SmtpClient()
smtp.Host = host
smtp.Port = port
smtp.EnableSsl = enableSsl
smtp.UseDefaultCredentials = defaultCredentials
Dim networkCred As New NetworkCredential(smtpSection.Network.UserName, smtpSection.Network.Password)
smtp.Credentials = networkCred
smtp.Send(mm)
End Using
End Using
End Sub
Screenshots
Email
The PDF
For more details on pdfmake plugin and sending email refer below articles.
Export GridView to PDF without using iTextSharp in ASP.Net How to send email with attachment in ASP.Net
