Welcome folks today in this blog post we will be using the html2pdf.js library to convert the html to pdf documents and we will be adding the page breaks inside the pdf document in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make an index.html file and copy paste the following code
index.html
First of all we need to include the bootstrap css cdn and also we need to include the html2pdf.js library cdn and also the jquery cdn as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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>Html2Pdf.js Tutorial to Add Page breaks</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> </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/html2pdf.js/0.8.1/html2pdf.bundle.min.js"></script> </html> |
As you can see in the above html code we are importing the required libraries of bootstrap jquery and html2pdf.js . And now we need to copy paste the below html code
|
1 2 3 4 5 6 7 8 9 |
<div id="element"> <div> <h1>This is the first page inside PDF Document</h1> </div> <div class="html2pdf__page-break"></div> <div> <h1>This is the second page inside PDF Document</h1> </div> </div> |
As you can see inside the html we have two div elements inside that we have the h1 heading in which basically we have written the text. And we are providing the class to the div element which is the html2pdf__page-break this will add the page break inside the pdf document.
Adding the Javascript Code
Now we will be adding the javascript code to add the page break and also download the pdf document using the html2pdf.js library as shown below
|
1 2 3 4 |
<script> let element = document.getElementById('element') html2pdf(element) </script> |
As you can see we are first of all targeting the parent div element using it’s id and after that we are passing the div element reference to the html2pdf library constructor.
And now if you open the index.html file inside the browser you will see the below output of the pdf document that will have two pages inside the document
Adding Images in PDF Document
We can even add images as well instead of text inside the pdf document and then we can have page breaks as well as shown below in the html code
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="element"> <div> <h1>This is the first page inside PDF Document</h1> </div> <div class="html2pdf__page-break"></div> <img src="profile.jpg" width="200" height="200"/> <div class="html2pdf__page-break"></div> <div> <h1>This is the second page inside PDF Document</h1> </div> </div> |
