Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

Html2Pdf.js Library Tutorial to Convert HTML to PDF and Add Page Breaks Inside PDF in Javascript

Posted on November 15, 2022

 

 

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>

 

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme