Skip to content
Related Articles

Related Articles

How to design runtime generated PDF via HTML ?

Improve Article
Save Article
  • Last Updated : 31 Aug, 2021
Improve Article
Save Article

Many times, we have faced the problem of saving a particular webpage or any online specific element that need to save in the form of a pdf file while using the browser. In that case, either we have used the 3rd party extension or any app or tools to generate it into a pdf file. In this article, we will learn to design the runtime generated pdf file via HTML. This task can be achieved in 3 ways:    

  • Print the specific webpage and save it as a PDF
  • Using jsPDF library
  • Using html2pdf library

Let’s understand all the 3 concepts one by one with the help of examples.

1.Print the specific element and save it as a PDF:

We are going to generate a window and save this as a pdf during runtime. This is similar to the default printing features of the system. The steps are discussed below.

  • Create a new window using the ‘window.open‘ method.
  • Write the innerHTML for our <div> tag, inside that window.
  • Print the window
  • Close the window

 

Example: In this example, we will use the html2pdf CDN link that will help to generate the pdf file.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- html2pdf CDN-->
    <script src=
    </script>
  
    <style>
        .container {
            position: fixed;
            top: 20%;
            left: 28%;
            margin-top: -65px;
            margin-left: -100px;
            border-radius: 7px;
        }
  
        .card {
            box-sizing: content-box;
            width: 700px;
            height: 150px;
            padding: 30px;
            border: 1px solid black;
            font-style: sans-serif;
            background-color: #f0f0f0;
        }
  
        #button {
            background-color: #4caf50;
            border-radius: 5px;
            margin-left: 650px;
            margin-bottom: 5px;
            color: white;
        }
  
        h2 {
            text-align: center;
            color: #24650b;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <button id="button">Generate PDF</button>
        <div class="card" id="makepdf">
            <h2>Welcome to GeeksforGeeks</h2>
            <ul>
                <li>
                    <h4>
                        We are going to generate a pdf 
                        from the area inside the box
                    </h4>
                </li>
                <li>
                    <h4>
                        This is an example of generating 
                        pdf from HTML during runtime
                    </h4>
                </li>
            </ul>
        </div>
    </div>
</body>
  
<script>
    var button = document.getElementById("button");
    var makepdf = document.getElementById("makepdf");
  
    button.addEventListener("click", function () {
        var mywindow = window.open("", "PRINT", 
                "height=400,width=600");
  
        mywindow.document.write(makepdf.innerHTML);
  
        mywindow.document.close();
        mywindow.focus();
  
        mywindow.print();
        mywindow.close();
  
        return true;
    });
</script>
  
</html>

Output:

2.Using jsPDF library:

In order to generate a pdf in runtime, we can use the jsPDF library. The steps are:

  • Include the jsPDF CDN in the <head> tag in HTML document. The CDN is given below, search ‘JsPDF CDN’ at google for the latest version.
  • Generate a pdf from the HTML div using ‘fromHTML’ method.
  • Save the file using the save() method in javascript.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>jsPDF Library</title>
  
        <!--JSPDF CDN-->
        <script src=
        </script>
  
    <style>
        .container {
            position: fixed;
            top: 20%;
            left: 28%;
            margin-top: -65px;
            margin-left: -100px;
            border-radius: 7px;
        }
  
        #makepdf {
            box-sizing: content-box;
            width: 700px;
            height: 150px;
            padding: 30px;
            border: 1px solid black;
            font-style: sans-serif;
            background-color: #f0f0f0;
        }
  
        #button {
            background-color: #4caf50;
            border-radius: 5px;
            margin-left: 650px;
            margin-bottom: 5px;
            color: white;
        }
  
        h2 {
            text-align: center;
            color: #24650b;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <button id="button">Generate PDF</button>
        <div id="makepdf">
            <h2>Welcome to GeeksforGeeks</h2>
            <ul>
                <li>
                    <h4>
                        We are going to generate a pdf 
                        from the area inside the box
                    </h4>
                </li>
                <li>
                    <h4>
                        This is an example of generating 
                        pdf from HTML during runtime
                    </h4>
                </li>
            </ul>
        </div>
    </div>
  
    <script>
        var button = document.getElementById("button");
        button.addEventListener("click", function () {
            var doc = new jsPDF("p", "mm", [300, 300]);
            var makePDF = document.querySelector("#makepdf");
  
            // fromHTML Method
            doc.fromHTML(makePDF);
            doc.save("output.pdf");
        });
    </script>
</body>
  
</html>

Output:

3.Using html2pdf library:

The steps to generate a pdf file using the html2pdf library are:

  • Include the html2pdf CDN at the top of the HTML document. The CDN is given below, search ‘html2pdf CDN’ at google for the latest version.
  • Generate pdf using html2pdf() object. This is a default object of html2pdf library.
  • Save the pdf.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- html2pdf CDN-->
    <script src=
    </script>
  
    <style>
        .container {
            position: fixed;
            top: 20%;
            left: 28%;
            margin-top: -65px;
            margin-left: -100px;
            border-radius: 7px;
        }
  
        .card {
            box-sizing: content-box;
            width: 700px;
            height: 150px;
            padding: 30px;
            border: 1px solid black;
            font-style: sans-serif;
            background-color: #f0f0f0;
        }
  
        #button {
            background-color: #4caf50;
            border-radius: 5px;
            margin-left: 650px;
            margin-bottom: 5px;
            color: white;
        }
  
        h2 {
            text-align: center;
            color: #24650b;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <button id="button">Generate PDF</button>
        <div class="card" id="makepdf">
            <h2>Welcome to GeeksforGeeks</h2>
            <ul>
                <li>
                    <h4>
                        We are going to generate a pdf 
                        from the area inside the box
                    </h4>
                </li>
                <li>
                    <h4>
                        This is an example of generating 
                        pdf from HTML during runtime
                    </h4>
                </li>
            </ul>
        </div>
    </div>
  
    <script>
        var button = document.getElementById("button");
        var makepdf = document.getElementById("makepdf");
  
        button.addEventListener("click", function () {
            html2pdf().from(makepdf).save();
        });
    </script>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!