on this blog i will explain how to convert html to pdf we are using jsPdf to convert from html to pdf and download as pdf
First include js file
<script src="jquery-3.6.0.min.js"></script>
<script src="jspdf.min.js"></script>
<!-- You can also use live code of js -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> -->
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});
</script>
Now add css code
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
margin: 0px auto;
}
#htmlContent{
text-align: center;
}
td, th, button {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
button {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
Now add html code
<body>
<div id="htmlContent">
<h2 style="color: #0094ff">Coderraj.in</h2>
<p>How to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Contact</th>
<th>Address</th>
</tr>
<tr>
<td>Rajesh</td>
<td>07710</td>
<td>Raipur</td>
</tr>
<tr>
<td>Raj</td>
<td>985645645454</td>
<td>Durg</td>
</tr>
<tr>
<td>Rahul</td>
<td>6565655454</td>
<td>Delhi</td>
</tr>
<tr>
<td>Ashu</td>
<td>5656</td>
<td>Bhilai</td>
</tr>
</tbody>
</table>
</div>
<div id="editor"></div>
<center>
<p>
<button id="generatePDF">Download PDF</button>
</p>
</center>
Complete Code here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Html to PDF using jsPdf By Coderraj.in</title>
<!-- You can also use live code of js -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script> -->
<script src="jquery-3.6.0.min.js"></script>
<script src="jspdf.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
margin: 0px auto;
}
#htmlContent{
text-align: center;
}
td, th, button {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
button {
border: 1px solid black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<div id="htmlContent">
<h2 style="color: #0094ff">Coderraj.in</h2>
<p>How to convert and Download HTML page to PDF file with CSS, using JavaScript and jQuery.</p>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Contact</th>
<th>Address</th>
</tr>
<tr>
<td>Rajesh</td>
<td>07710</td>
<td>Raipur</td>
</tr>
<tr>
<td>Raj</td>
<td>985645645454</td>
<td>Durg</td>
</tr>
<tr>
<td>Rahul</td>
<td>6565655454</td>
<td>Delhi</td>
</tr>
<tr>
<td>Ashu</td>
<td>5656</td>
<td>Bhilai</td>
</tr>
</tbody>
</table>
</div>
<div id="editor"></div>
<center>
<p>
<button id="generatePDF">Download PDF</button>
</p>
</center>
<script type="text/javascript">
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function (element, renderer) {
return true;
}
};
$('#generatePDF').click(function () {
doc.fromHTML($('#htmlContent').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('sample_file.pdf');
});
</script>
</body>
</html>
