How To Print A Page Or Section in Javascript (Simple Examples)

Welcome to a quick tutorial on how to print a page (or part of it) in Javascript. Looking to create a “print this page” button using Javascript? Or maybe to just print a certain section of the page?

  • The easiest way to print the entire page is to use the window.print() function.
  • Printing a section is slightly tricky – We need to create a new window, copy the entire section over, then print the new window.
    • var printwin = window.open("");
    • printwin.document.write(document.getElementById("TARGET").innerHTML);
    • printwin.print();

This covers the basics, but let us walk through more examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes JS Print Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

JAVASCRIPT PRINT

All right, let us now get into the examples of printing a page in Javascript.

 

1) PRINT THE ENTIRE PAGE

1-simple-print.html
<input type="button" value="Print Page" onclick="window.print()"/>

Yep, window.print() is all it takes. For you beginners who are thinking of ways to bypass the print dialog and print directly – Sadly, we can’t. That is a built-in security feature in all browsers, to prevent bad code ninjas from abusing the print function.

 

 

2) PRINT PART OF PAGE

2-print-part.html
<!-- (A) THE HTML -->
<!-- (A1) SECTION TO BE PRINTED -->
<div id="toprint">
  <h1>Foo Bar!</h1>
  <p>Hello World</p>
</div>
 
<!-- (A2) PRINT BUTTON -->
<input type="button" value="Print Above Section" onclick="printpart()"/>
<p>This will not be printed.</p>

<!-- (B) THE JAVASCRIPT -->
<script>
function printpart () {
  var printwin = window.open("");
  printwin.document.write(document.getElementById("toprint").innerHTML);
  printwin.stop();
  printwin.print();
  printwin.close();
}
</script>

Foo Bar!

Hello World

This will not be printed.

Unfortunately, we cannot specify which section to print with window.print(). So the game plan is to do it in a roundabout way:

  • Open a new blank window – var printwin = window.open("")
  • Set the contents of the new window to the required section – printwin.document.write(document.getElementById("toprint").innerHTML)
  • Finally, the star of the show printwin.print().

Personally, I got hit with a strange bug with the new window loading non-stop. That is where printwin.stop() came in handy.

 

 

3) USING A PRINT LIBRARY

3-print-js.html
<!-- (A) LOAD PRINTJS LIBRARY -->
<!-- Documentation: https://printjs.crabbly.com/ -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"/>

<!-- (B) SECTIONS FOR TEST PRINT -->
<div id="printthis">
  <h1>Foo Bar</h1>
  <p>Hello World</p>
</div>
<img src="goose.jpg"/>
<div>This will not be printed.</div>

<!-- (C) PRINT BUTTONS -->
<!-- (C1) PRINT "PRINTTHIS" ONLY -->
<input type="button" value="Print section" onclick="printJS('printthis', 'html')"/>
 
<!-- (C2) PRINT IMAGE -->
<input type="button" value="Print angry goose" onclick="printJS('goose.jpg', 'image')"/>
 
<!-- (C3) PRINT PDF FILE ON SERVER -->
<input type="button" value="Print PDF on server" onclick="printJS('foo.pdf', 'pdf')"/>

To make things easier, or if you have “special requirements” to print stuff like a PDF document on the server – Check out print.js.

 

 

4) ALTERNATIVE – CSS PRINT

4-css-print.html
<style>
@media only print {
  body { visibility: hidden; }
  .printthis { visibility: visible; }
}
</style>
 
<p>This will not be printed.</p>
<div class="printthis">
  <h1>This section will be printed</h1>
  <div>Foo bar!</div>
</div>
<span>This will also not be printed.</span>

For you guys who are having trouble with the “print certain section”, here is an alternative to using the @media only print CSS media query:

  • Set visibility: hidden on the entire body.
  • Apply visibility: visible on the parts that you want to print.

That’s it. The entire page will appear as usual on the screen and the visibility rules will only apply when users print the page.

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

How To Print Page Using JS & CSS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.