Welcome folks today in this blog post we will be exporting html5 form filled input fields to pdf document in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to include the jspdf library cdn as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype> <html> <head> <title>jsPDF Convert PDF to Base64 String</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> </head> <body> </body> </html> |
Now we will be writing the html code inside which we will have the bootstrap 4 form input fields where the user can write information or fill out form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<div class="container form" id="form"> <div class="row title hidden-print"> <div class="col-sm-6"> <h1>HTML to PDF</h1> </div> <div class="col-sm-6 text-right"><a class="btn btn-success" id="exportForm">Export page</a></div> </div> <div id="first-page"> <div class="row title"> <div class="col-sm-12"> <h2>First Page</h2> </div> </div> <div class="row"> <div class="col-sm-3 form-group"><label>First Name</label><input class="form-control" /></div> <div class="col-sm-3 form-group"><label>Last Name</label><input class="form-control" /></div> <div class="col-sm-3 form-group"><label>Birthday</label><input class="form-control" /></div> <div class="col-sm-3 form-group"><label>Email Address</label><input class="form-control" /></div> </div> <div class="row hidden-print"> <div class="col-sm-12 form-group"><label>Bio</label><textarea class="form-control"></textarea></div> </div> </div> <div id="second-page"> <div class="row title"> <div class="col-sm-12"> <h2>Second Page</h2> </div> </div> <div class="row"> <div class="col-sm-3 form-group"><label>First Name</label><input class="form-control" /></div> <div class="col-sm-3 form-group"><label>Last Name</label><input class="form-control" /></div> <div class="col-sm-3 form-group"><label>Birthday</label><input class="form-control" /></div> <div class="col-sm-3 form-group"><label>Email Address</label><input class="form-control" /></div> </div> <div class="row"> <div class="col-sm-12 form-group"><label>Bio</label><textarea class="form-control"></textarea></div> </div> </div> </div> |
As you can see we have two user registration forms. We now have to export these two forms in two pages inside pdf document. For this we need to also style this form so that these styles can also be exported to pdf document. So copy paste the below css styles to the html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
body { padding: 10px; } * { background-color: #fff; } h1 { margin-top: 0; } h2 { margin-top: 40px; } .form { padding: 20px; } .form .title { margin-bottom: 60px; } .form .row:nth-child(even) { padding-bottom: 20px; margin-bottom: 30px; border-bottom: #ccc thin solid; } |
As you can see we have the html5 form fields. Now we need to write the custom javascript code required to export them to pdf document.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$('#exportForm').click(function () { var pdf = new jsPDF('a', 'mm', 'a4'); var firstPage; var secondPage; html2canvas($('#first-page'), { onrendered: function (canvas) { firstPage = canvas.toDataURL('image/jpeg', 1.0); } }); html2canvas($('#second-page'), { onrendered: function (canvas) { secondPage = canvas.toDataURL('image/jpeg', 1.0); } }); setTimeout(function () { pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0); pdf.addPage(); pdf.addImage(secondPage, 'JPEG', 5, 5, 200, 0); pdf.save("export.pdf"); }, 150); }); |
As you can see we are using the html2canvas library to automatically take the screenshot of both the forms and convert it to jpeg image and then we are converting this image to base64 string url and then adding these two images in pdf document in separate pages using the addImage() method. Now if you open the index.html file inside the browser it will look something like this as shown below
