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

 

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

Read Also

Export HTML Table To Excel File using JavaScript

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…

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

    • Hello Hiamnshu, Thanks for asking your doubt.
      read complete article carefully…implement it again then image will definitely show in pdf file.

      Reply
      • 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.

        Reply
  1. 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

    Reply
  2. 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!

    Reply

Leave a Comment