HTML to PDF in JavaScript - Convert Web Page to PDF File

HTML to PDF in JavaScript: Most of the developers want to convert HTML web pages to PDF files in a simple way. but they don’t get the right platform to learn to code in a simple & easy way. well, I have shared in this article the standard & simple JavaScript source code for generating PDF files from the HTML page.

PDF files help us to read the bulk content of the web page without an internet connection.

In this tutorial, you will learn to generate HTML to pdf with plain Text, CSS, & Images.

html to pdf in javascript

Table of Contents

How to Convert HTML to PDF in JavaScript

Here I have created an HTML button to generate pdf on click. But you can perform this script on another event like on load, on hover, on keypress, on key down, on key up, etc

Before getting started with the next steps, you should confirm the following basic requirement.

Create your project folder with the following structure.

 html-to-pdf/
   |__images/
   |   |__codingstatus.jpg
   |__custom.js
   |__html-with-text.php
   |__html-with-css.php
   |__html-with-image.php
   |__html-with-text-image-css.php

Custom jQuery to convert HTML to PDF

You have to write a custom jquery code according to the following steps –

First of all, apply the click event on an HTML button with id #btn. Here #btn – It is the id of the PDF converter button. When we click this button, the HTML page will convert to a PDF file. if you need to convert the HTML page to PDF on the page load then you should apply onload the event.
Create an object new jsPDF() and assign it to the variable pdf
Access the whole body of the page using $('body') and assign it to the section
Create an anonymous function and assign it to the page. After that declare pdf.save() the name of the PDF file pagename.pdf
Pass two parameters like section & page to the pdf.addHTML()

File Name- custom.js

$(document).on('click','#btn',function(){

let pdf = new jsPDF();
let section=$('body');
let page= function() {
    pdf.save('pagename.pdf');
   
};
pdf.addHTML(section,page);

})

You will have to include the custome.js file in which the file has to convert to the PDF.

Convert HTML to PDF with Plain Text

In this step, You can generate a pdf from any type of content like a cover letter, table data with columns & rows, list of categories, user profile information & more. So, You will get the code to convert the HTML page to a PDF file with some plain text.

File Name – html-with-text.php

<!DOCTYPE html>
<html>
<head>
<title>HTML with Plain Text</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
  
    html, body{
      overflow-x: hidden;
    }
    #btn{
      padding:10px;
      border: 0px;
      margin: 50px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<button id="btn">Convert to PDF</button>

<div id="text">
<h2>HTML Page with Plain Text to PDF</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
</body>
</html>

Convert HTML to PDF with CSS

In this step, you can generate pdf from color & customize the web page with different design patterns. So, you will get the code to convert an HTML file to a PDF file with CSS

File Name- html-with-css.php

<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS</title>
 <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
  #text{
    max-width: 100%;
    width: 35%;
    text-align: center;
    margin: 50px;
    border: 5px solid orange;
    background: whitesmoke;
  }
  #text h2{
    background: orange;
    color: white;
  }
#btn{
      padding:10px;
      border: 0px;
      margin: 50px;
      cursor: pointer;
    }
  </style>
  
    html, body{
      overflow-x: hidden;
    }

</style>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>

<button id="btn">Convert to CSS</button>

<div id="text">
<h2>HTML Page with CSS to PDF</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
</body>
</html>

Convert HTML to PDF With Image

In this step, you can generate a pdf from the web page that contains one or more images. So, you will get the code to convert an HTML file to a PDF file with an image

File Name- html-with-image.php

<!DOCTYPE html>
<html>
<head>
<title>HTML with Image</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
  
    html, body{
      overflow-x: hidden;
    }
    #btn{
      padding:10px;
      border: 0px;
      margin: 50px;
      cursor: pointer;
    }
  </style>
  </style>
</head>
<body>

<button id="btn">Convert to PDF</button>

<div id="text">
  
<h2>HTML Page with Image to PDF</h2>
<img src="images/codingstatus.jpg">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>
</body>
</html>

Convert HTML to PDF with Plain Text, CSS & Image

In this step, you can generate a pdf from the web page that contains one or more images, text & CSS design patterns. So, you will get the code to convert an HTML file to a PDF file with plain text. CSS & image

File Name – html-with-text-image-css.php

<!DOCTYPE html>
<html>
<head>
<title>HTML Page with text,image and CSS to PDF</title>
     <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<style type="text/css">
  #text{
    max-width: 100%;
    width: 35%;
    text-align: center;
    margin: 50px;
    border: 5px solid orange;
    background: whitesmoke;
  }
  #text h2{
    background: orange;
    color: white;
  }
#btn{
      padding:10px;
      border: 0px;
      margin: 50px;
      cursor: pointer;
    }
  </style>
  
    html, body{
      overflow-x: hidden;
    }

</style>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
</head>
<body>
    <script type="text/javascript"></script>

<button id="btn">Convert to CSS</button>

<div id="text">
<h2>HTML Page with text,image and CSS to PDF</h2>
<img src="https://codingstatus.com/wp-content/uploads/2019/12/codingstatus.jpg" width="100%">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="custom.js"></script>

</body>
</html>

Upcoming Content –

I will share the following content as soon as possible. Please do comment if you really need it –

Convert HTML Form Data into PDF File
Generate Multiple PDF Pages from an HTML Page
Export HTML Table Data into PDF file

My Suggestion

Dear Developer, I hope you will be able to convert HTML to pdf in javascript. Now you can easily generate PDF files from HTML content in your project. If you have any questions regarding coding skills, Frequently, you can ask me through the below comment box.

Thanks for reading my article…

13 thoughts on “HTML to PDF in JavaScript – Convert Web Page to PDF File”

Hiamnshu
March 13, 2020 at 7:41 pm
image its not show in pdf file
- Noor Khan
  April 14, 2020 at 11:19 pm
  Hello Hiamnshu, Thanks for asking your doubt.
  read complete article carefully…implement it again then image will definitely show in pdf file.
  - menyi
    November 11, 2020 at 9:24 pm
    Hello
    Thanks for the post !!
    I also have the same problem with the image. It does not show in pdf file.
    I did copied the whole code. however the pdf file is created without the image.
    It also points out a syntax error in this script :
    $(document).on(‘click’,’#btn’,function(){ let pdf = new jsPDF(); let section=$(‘body’); let page= function() { pdf.save(‘pagename.pdf’); }; pdf.addHTML(section,page); })
    I would really appreciate your help .
    Thanks a lot.
Surendra Narayan Roy
August 12, 2020 at 8:30 pm
It is doing only one page PDF,
Is it possible to convert multi page PDF?
- Noor Khan
  August 13, 2020 at 1:31 pm
  Yes, It is possible. But you have to include PDF conversion script in multi page
Manoj
October 10, 2020 at 9:32 pm
thank you..
- Noor Khan
  October 10, 2020 at 11:38 pm
  Your most welcome Manoj
Xpulse
November 12, 2020 at 9:47 am
okay, Thankyou for your reply,
Do you have any other solution for mentioned case ?
- Noor Khan
  November 12, 2020 at 1:03 pm
  Yes, I will share a tutorial to solve your query as soon as possible. Please wait.. otherwise search in google
Jackson
November 20, 2020 at 7:59 am
Hi, how can I set the pdf to be landscape? Also the page prints fine when its the body tag selected but if I select my div with the ID attribute my white background turns black ruining the look. Thanks
Mr.Dinh
December 4, 2020 at 5:52 pm
Thanks you ur post! You help me very murch!
But i have problem with pdf files. That’s non border of table. Border of table non display as when display on site.
Help me please! Thanks again!
babu
January 16, 2021 at 3:28 pm
This is excellent please make it for multipage conversion
ITDesignerspk
March 26, 2021 at 8:02 am
Thanks it helped me a lot

Comments are closed.