Hi Developers,
Lets see How To Convert HTML To PDF Using jQuery
create a html file with the generate button which calls script on clicking
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
background-color: #111;
color:white;
}
tr:nth-child(odd) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h1>How To Convert HTML To PDF Using jQuery - ITSolutionsGuides</h1>
<form class="form">
<table>
<tbody>
<tr>
<th>Company Name</th>
<th>Employee Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhinesh</td>
<td>Nivetha</td>
<td>Moonu</td>
</tr>
<tr>
<td>Dark Chocolate</td>
<td>Maggie</td>
<td>Curd</td>
</tr>
<tr>
<td>Apple</td>
<td>Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Yoshi</td>
<td>Canada</td>
</tr>
<tr>
<td>HP</td>
<td>Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Acer</td>
<td>Hel</td>
<td>UK</td>
</tr>
</tbody>
</table><br>
<input type="button" id="create_pdf" value="Generate PDF">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script>
$(document).ready(function () {
var form = $('.form'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('itsolutionsguides.pdf');
form.width(cache_width);
});
}
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
});
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides