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 just print a certain section of the page?

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

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-print-a-page-or-section-in-javascript/” title=”Print A Page Or Section in Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

1) PRINT THE ENTIRE PAGE

<input type="button" value="Print Entire 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

<!-- (A) THE HTML -->
<!-- (A1) SECTION TO BE PRINTED -->
<div id="demoB">
  <h1>Dummy Page</h1>
  <img src="http://site.com/demo.png">
  <p>Hello world.</p>
</div>
 
<!-- (A2) PRINT BUTTON -->
<input type="button" value="Print Above Section" onclick="printpart()">
<p>Rest of the page will not be printed.</p>

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

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().

That is the idea, but I got hit with a few bugs in Chrome:

• The new empty window will load non-stop, that is why we use printwin.stop().
• Images/videos wouldn’t load, you will have to specify an absolute URL.

 

 

3) USING A PRINT LIBRARY

<!-- (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="demoC">
  <h1>Dummy Page</h1>
  <img src="demo.png">
  <p>Hello world.</p>
</div>
<div>Another section.</div>

<!-- (C) PRINT BUTTONS -->
<!-- (C1) PRINT "DEMOC" ONLY -->
<input type="button" value="Print section" onclick="printJS('demoC', 'html')">
 
<!-- (C2) PRINT IMAGE -->
<input type="button" value="Print angry girl" onclick="printJS('angry.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

<style>
@media only print {
  body { visibility: hidden; }
  #demoD { visibility: visible; }
}
</style>
 
<p>This will not be printed.</p>
<div id="demoD">
  <h1>Dummy Page</h1>
  <img src="demo.png">
  <p>Hello world.</p>
</div>
<div>This will also not be printed.</div>

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.

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & REFERENCES

• window.print() – MDN
• How to print form in Javascript – Students Tutorial
• How to print a page using JavaScript – TutorialsPoint

 

INFOGRAPHIC CHEAT SHEET