How to Generate a PDF from an HTML Webpage?

In this article, we are going to explore the conversion of required HTML content into a PDF file. Many a time we have to read and accept the Terms & Conditions, a better way is to download the PDF file read it in spare time, and then accept it. Therefore, for achieving this we can make use of converting the content into a PDF file.

We also need some content to be stored in a PDF file to be used later on for various purposes. The most common use includes downloading chapters, texts, thesis, etc.

The above conversion can be achieved in 2 ways −

  • Printing the specific webpage and saving it as a PDF

  • Using the jsPDF library

We are going to explore both ways in the below examples

Example 1: Printing the specific webpage and saving it as a PDF.

In the below example, we will be exploring the 1st way and printing the specific webpage into a PDF. This is similar to default printing and saving the file as a PDF.

The steps to achieve this are as follows −

  • Open a new window using the window.open() method

  • Writing the innerHTML for the div tag inside the window

  • Printing and closing the window

Example

#Filename: index.html

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Generate PDF</title>
   <style>
      .container {
         position: fixed;
         top: 20%;
         left: 28%;
         border-radius: 7px;
      }
      .card {
         box-sizing: content-box;
         width: 300px;
         height: 400px;
         padding: 30px;
         border: 1px solid black;
         font-style: sans-serif;
         background-color: #f0f0f0;
      }
      h2 {
         text-align: center;
         color: #24650b;
      }
   </style>
</head>
<body>
   <div class="container">
      <button id="pdfButton"><b>Click here to Generate PDF</b></button>
      <div class="card" id="generatePDF">
         <h2>Welcome to Tutorials Point</h2>
         <ul>
            <li>
               <h4> We are going to generate a pdf from the area inside the box</h4>
            </li>
            <li>
               <h4> About Company </h4>
               <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the
comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
            </li>
         </ul>
      </div>
   </div>
   <script>
      var button = document.getElementById("pdfButton");
      var makepdf = document.getElementById("generatePDF");
      button.addEventListener("click", function () {
         var mywindow = window.open("", "PRINT", "height=600,width=600");
         mywindow.document.write(makepdf.innerHTML);
         mywindow.document.close();
         mywindow.focus();
         mywindow.print();
         return true;
      });
   </script>
</body>
</html>

Output

Example 2: Using jsPDF Library

The other way is to use the PDF library provided by the JS i.e. jsPDF library. The steps to use this library are as follows −

  • Include the CDN link to jsPDF in the <head> tag of the HTML to import the library.

  • Now we can use the above library to use its functions. We will use the fromHTML method to create PDF from HTML.

  • Save the file using the save() function once the file is generated.

Example 2

#Filename: index.html

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <title>Generate PDF using jsPDF Library</title>
      <!--JSPDF CDN-->
      <script src= "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
      </script>
   <style>
      .container {
         position: fixed;
         top: 20%;
         left: 28%;
         border-radius: 7px;
      }
      #generatePdf {
         box-sizing: content-box;
         width: 300px;
         height: 100px;
         padding: 30px;
         border: 1px solid black;
         font-style: sans-serif;
         background-color: #f0f0f0;
      }
      #pdfButton {
         background-color: #4caf50;
         border-radius: 5px;
         margin-left: 300px;
         margin-bottom: 5px;
         color: white;
      }
      h2 {
         text-align: center;
         color: #24650b;
      }
   </style>
</head>
<body>
   <div class="container">
      <button id="pdfButton">Generate PDF</button>
      <div id="generatePdf">
         <h2>Welcome to Tutorials Point</h2>
         <ul>
            <li>
               <h4> The following content will be downloaded as PDF.</h4>
            </li>
            <li>
               <h4>About Company</h4>
               <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
               <p>The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
            </li>
         </ul>
      </div>
   </div>
   <script>
      var button = document.getElementById("pdfButton");
      button.addEventListener("click", function () {
         var doc = new jsPDF("p", "mm", [300, 300]);
         var makePDF = document.querySelector("#generatePdf");
         // fromHTML Method
         doc.fromHTML(makePDF);
         doc.save("output.pdf");
      });
   </script>
</body>
</html>

Output

Updated on: 2022-04-26T07:49:28+05:30

37K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements