Code to Print and Save HTML Page as PDF using JavaScript

Aniruddha Chaudhari/40254/17
CodeHTML & CSS

Being a web developer, many times you need to allow the user to print or save HTML page as PDF.

Suppose you have a web form on your website and the user has to submit the data. After submitting the form, you can allow the user to print or save the HTML page as a PDF with all the user data. A user can use this data for future reference.

Another example. If you have a tutorial on your website, you can allow a user to print the tutorial so that the user can use it offline.

A simple solution to allow the user to print or save the HTML page as PDF will be very helpful. You don’t need any external tool to convert HTML to PDF.

Code to Print and Save HTML Page as PDF

Hope you are familiar with basic HTML tags. Call the Javascript function inside the HTML to print and save the webpage as PDF.

<!DOCTYPE html>
<html>
  <body>
    <h2>Tutorial to print HTML page</h2>
    <p>Click the button to print this page.</p>

    <button onclick="printFunction()">Print</button>

    <script>
      function printFunction() { 
        window.print(); 
      }
    </script>
  </body>
</html>

Here,

  • The window.print() is the inbuilt function to print the current window.
  • The  printFunction() is user define javascript function which you call from HTML object.

By clicking on the button, the user can save the HTML page as PDF or can download it.

The print() function supports almost all the popular web browsers like Google Chrome, Firefox, Internet Explorer, Opera, and Safari (Mac and other iOS web browsers).

What’s Next?

If you are a web developer or interested in web development,  do check how the 20 best web form design practices have helped me grow professionally.

Javascript is one of the highest-paying programming languages and has very advanced programming features.

This is a simple JavaScript function to convert HTML to PDF or to print or save HTML page as PDF. You can run this code in an online HTML editor for testing.

For more of such content, stay tuned.

Python Interview Questions eBook

HTMLJavaScript
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.
Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    sakshi nasa
    July 1, 2021 at 11:16 am

    I want to print a specific part of the page and not the entire page. Please suggest.

    • Reply
      Aniruddha Chaudhari
      July 1, 2021 at 3:17 pm

      Set the div for the content you want to print. And then use the write() method inside the JavaScript function.

      Let’s say…

      function printFunction() {
            var divContents = document.getElementById("DIV_ID").innerHTML;
            var prnt = window.open('', '', 'height=500, width=500');
             prnt .document.write(divContents);
            prnt .document.close();
            prnt .print();
}

      Try this and let me know if this is working for you.

  • Reply
    Erik
    July 5, 2021 at 2:24 pm

    This print functions works! But how to use it as Save as a function?

    • Reply
      Aniruddha Chaudhari
      July 5, 2021 at 5:19 pm

      When you click on the print button, you can print the page if you are connected to the printer or you can also save the page as PDF.

      • Reply
        Gautam
        February 17, 2022 at 12:45 pm

        Hi

        Is there any other way to code for saving as pdf, rather than doing it manually?
        Means in one click, it automatically selects the ‘window. print’ and select ‘save as PDF’ and saving the PDF

        Thanks in advance.

        • Reply
          Aniruddha Chaudhari
          February 18, 2022 at 4:30 pm

          Hi,

          In that case, you have to create the PDF file on the server and then allow the user to download it. Which server-side programming you are using?

      • Reply
        Gautam
        February 17, 2022 at 12:48 pm

        Hi
        Is there any way to ‘save as pdf ‘ programmatically using window.print()? I’ve used libraries for it. But the CSS became the issue there.

        Thanks in advance.

        • Reply
          Aniruddha Chaudhari
          February 18, 2022 at 4:28 pm

          window.print() works with JavaScript and it gets executed in the browser. Which programming language solution you are looking for?

  • Reply
    Sarah
    October 21, 2021 at 8:31 pm

    Simple and very useful trick.

  • Reply
    EG
    November 13, 2021 at 5:39 am

    thank you very much for the tip!

    • Reply
      Aniruddha Chaudhari
      December 19, 2021 at 10:35 am

      You’re welcome.

  • Reply
    Divya
    March 19, 2022 at 9:58 pm

    Good evening sir

    Code to print the upload file. For example, I am uploading files means, I want to print the same file coding in HTML based using javascript.

    • Reply
      Aniruddha Chaudhari
      March 20, 2022 at 10:50 pm

      Yeah, you can do that. Provide media upload in the form. Once the document is uploaded by the user, you can display PDF file.

  • Reply
    Rutuja
    May 9, 2022 at 4:41 pm

    Hi
    Is there any way to ‘save as pdf ‘ programmatically using window.print()? I am using Python.

    • Reply
      Aniruddha Chaudhari
      May 11, 2022 at 12:40 pm

      Hi Rutuja,

      In this tutiorial, We are already using window.print().

  • Reply
    iamvo
    July 25, 2022 at 12:01 pm

    Hi, Anyway I can save as pdf direct without click button print in popup ?

    Thankyou!

    • Reply
      Aniruddha Chaudhari
      July 30, 2022 at 12:12 pm

      I think you are asking to print the page without a print button on it. If so, you can print specific div as well. So you can skip printing the complete page and print button.

Leave a Reply