Print only the content of a webpage using CSS and JavaScript

OpenJavaScript 0
Reading Time: 2 minutes 🕑

Last updated: August 24, 2022.

For security reasons, modern browsers do not allow JavaScript access to a user’s printer directly.

But what JavaScript can do is make a request to print the current page, which prompts the user with a print preview.

Table of contents

Print an entire page

Printing couldn’t be much more straightforward: call window.print() or, because it is a method on the global object, just print():

/* Request to print the current page */

window.print(); // OR: print();

This will request to print the entire page.

Print part of a web page

Printing part of a page is more difficult because window.print() doesn’t accept any arguments that could specify a part of the page to print (e.g. a <div> only).

Luckily, it is possible to specify the appearance of elements when printing using a CSS media query for the print view.

So inside @media print {}, first specify that all elements inside the body should not be displayed in print view using the ‘all’ wildcard (*).

Afterwards, set the appearance of the element you want to print and its content to display: block, making it visible.

Now, when window.print() is called, only the visible element will appear in the preview:

<!-- Print an element and its contents only -->

<style type="text/css">
  @media print {
    body * {
      display:none;
    }
  
    body .print-area, .print-area * {
      display:block;
    }
  }
  </style>
  <body>
    <div id="class="print-area">
      Print me.
    </div>
    <aside>
      Don't print me.
    </aside>
  </body>
 <script type="text/javascript">
   window.print() // Now, only the element with the 'print-area' class appears in the print preview 
</script>

Assigning a print area with JavaScript

In the above example, the element for printing has the print-area class name assigned to it.

In practice, this may not already be the case in your HTML markup.

But you can assign this name to any element using JavaScript.

To do so, access the classList of an element and call the add() method, passing in the class name to add:

For example, the code below assigns the class name print-area to an element with the ID of the-content:

<!-- Assigning an element to print using JavaScript -->

<style type="text/css">
  @media print {
    body * {
      display:none;
    }
  
    body .print-area, .print-area * {
      display:block;
    }
  }
  </style>
  <body>
    <div id="the-content">
      Print me.
    </div>
    <aside>
      Don't print me.
    </aside>
  </body>
 <script type="text/javascript">
  function areaPrint() {
    const areaToPrint = document.getElementById('the-content');
    areaToPrint.classList.add('print-area');
    window.print();
   }
   areaPrint();
</script>

Now, when window.print() is called, the .print-area CSS applies to the <div> with ID the-content, and it (and not the <aside>) is visible in the print view.

Summary

JavaScript can be used to send a job to the printer for user approval. An entire web page can be sent for printing by simply calling the window.print() method.

To print part of a page, use a CSS media query for the print view, specifying that only HTML content you want to print should be displayed in this view.

Related links