Hi mostafasalama,
In order to export DIV to PDF you need to make use of jQuery pdfmake plugin.
Refer below example to export DIV to PDF.
HTML
<div id="dvDetails">
<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>
<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 />
<input type="button" id="btnExport" value="Export" />
<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/pdfmake/0.1.22/pdfmake.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">
$("body").on("click", "#btnExport", function () {
html2canvas($("#dvDetails")[0]).then(function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("Table.pdf");
});
});
</script>
Demo
