Welcome folks today in this blog post we will be exporting the html document to pdf document with page break 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 make a index.html
file and copy paste the following code
First of all we will be including the cdn
of html2pdf library as shown below
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <title>html2pdf.js page break</title> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.js"></script> </html> |
And as you can see in the above code we are including the cdn
of html2pdf.js library as shown above. And now we need to write some html that we need to export to pdf document as shown below
1 2 3 4 5 |
<div id="element"> <div>First Content</div> <div class="html2pdf__page-break"></div> <div>second content</div> </div> |
As you can see we have the div
parent element and we have given id
to it so that we can target it using the javascript. And then we have a div with some content and then we have a page break
class which is html2pdf.js
page break class which is called html2pdf__page-break
you need to write the same class because this class will make sure it will add the page break after this the content will be shifted to the second page in the pdf document. And after this we are defining one other div element with some content. And now we simply need to export to pdf document by adding some javascript code as shown below
Now first of all we will be targeting the parent
div element which has got the id attached to it as shown below
1 |
let element = document.getElementById('element') |
Now we simply need to call the html2pdf()
method and pass this element to it as shown below
1 |
let element = document.getElementById('element') |
Now if you open the application the pdf
file will be downloaded automatically as an attachment as you can see
As you can see the content is split up into 2 pages with page break but there is some problem out there. We need to add some margin and padding to the text. So we can provide some config options to the html2pdf()
constructor as shown below
1 2 3 4 5 6 7 |
html2pdf(element,{ margin:10, filename:'output.pdf', image:{type:'jpeg',quality:0.98}, html2canvas:{scale:2,logging:true,dpi:192,letterRendering:true}, jsPDF:{unit:'mm',format:'a4',orientation:'portrait'} }) |
As you can see we are providing some custom options such as the margin which is in numbers and then we are also passing the custom filename to the pdf document and also adding the image quality and type parameter. Now if you open the app the text will have some space and margin in pdf document
Full Source Code
Wrapping it up this is the full source code of index.html
file with javascript
index.html
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jspdf encode pdf to base64 code</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div id="element"> <div>First Content</div> <div class="html2pdf__page-break"></div> <div>second content</div> </div> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.0/html2pdf.bundle.js"></script> <script> let element = document.getElementById('element') html2pdf(element,{ margin:10, filename:'output.pdf', image:{type:'jpeg',quality:0.98}, html2canvas:{scale:2,logging:true,dpi:192,letterRendering:true}, jsPDF:{unit:'mm',format:'a4',orientation:'portrait'} }) </script> </html> |