In this article, we will see how to convert HTML to pdf using jsPDF. Here, we will learn how to convert HTML to PDF using javascript.
We are using jsPDF to generate PDF in javascript. It can generate PDFs from the client side. The jsPDF is very easy to use in javascript.
It also provides multiple options for generating PDF files. You can generate PDF files with images, and multiple pages, and also support different languages like Japanese, Arabic, Russian, etc.
Learn More: jsPDF Javascript PDF Generate.
So, let's see jsPDF HTML to pdf convert, jsPDF HTML to pdf multiple pages, convert HTML to pdf using javascript, HTML to pdf in javascript using jsPDF.
jsPDF provides two different methods to use.
- Install using NPM
- jsPDF CDN File
Example:
In this step, we will create an HTML file. So, add the following code to the file.
<html>
<h1>How To Convert HTML To PDF Using jsPDF- Techsolutionstuff</h1>
<form class="form">
<table>
<tbody>
<tr>
<th>Company Name</th>
<th>Employee Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dell</td>
<td>Maria</td>
<td>Germany</td>
</tr>
<tr>
<td>Asus</td>
<td>Francisco</td>
<td>Mexico</td>
</tr>
<tr>
<td>Apple</td>
<td>Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>HP</td>
<td>Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Yoshi</td>
<td>Canada</td>
</tr>
</tbody>
</table><br>
<input type="button" id="generate_pdf" value="Generate PDF">
</form>
</html>
Now, add the style of this HTML page.
<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>
Add the following script to the HTML page for converting it to pdf.
<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
$('#generate_pdf').on('click', function () {
$('body').scrollTop(0);
generatePDF();
});
function generatePDF() {
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('tech-html-to-pdf.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>
You might also like:
Top comments (0)