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> |