All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Programs Examples With Output PDF

Last Updated : Mar 11, 2024

JavaScript Programs Examples With Output PDF

In this article we will show you the solution of JavaScript programs examples with output PDF, using JavaScript we can use convert HTML output to a PDF and download it.

This article will use an external link of ‘html2pdf.js’ to convert any webpage to a printable PDF. And also using the .form () and .save () methods here.

Step By Step Guide On JavaScript Programs Examples With Output PDF :-

First, we are going to see an example of HTML to PDF download. Let us see the code first.

<!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> javascript programs examples with output pdf </title>
    <style>
        h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : rgb(113, 221, 113) ;
         text-align : center ;
        }
        h3 {
            text-align : center ;
        }
        #container {
            display : block ;
            height : 400px ;
            width : 400px ;
            background-color : bisque ;
            color : darkblue ;
            justify-content : center ;
            align-items : center ;
        }
    </style>
    <script src = " https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js " ></script>
</head>
<body>
     <div id = "container">
    <h1> TALKERSCODE </h1>
    <h3> javascript programs examples with output pdf </h3>
        <p>
            HTML to PDF file using javascript !!!!!! <br>
            HTML to PDF file using javascript !!!!!! <br>
            HTML to PDF file using javascript !!!!!! <br>
            HTML to PDF file using javascript !!!!!! <br>
            HTML to PDF file using javascript !!!!!! <br>
            HTML to PDF file using javascript !!!!!! <br>
            HTML to PDF file using javascript !!!!!! <br>
        </p>
    </div>
        <button onclick = " generatePDF () "> download </button>
    <script>
        function generatePDF () {
            const element = document.getElementById ( 'container' ) ;
            html2pdf ()
            .from ( element )
            .save ( )
        }
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. First create a <div> with the id container, within it <h1> tag used to add heading here.
  7. Create a <p> tag with some text.
  8. Creating e <button> with the text download. Into that <button> add an onclick value of a function we’re going to use later in the JavaScript file.
  9. Created the <style> tag to add CSS to the HTML page.
  10. To add JavaScript Create a <script> tag.
  11. Create the function we mentioned before in the button.
  12. Within it ,add document.getElementById() to a constant element with the Id container
  13. Call the html2pdf() function. Mention the .from and .save.
  14. By clicking the download button, the pdf can be downloaded.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know JavaScript programs examples with output pdf.

I hope this article on JavaScript programs examples with output PDF helps you and the steps and method mentioned above are easy to follow and implement.