Print only the content of a webpage using CSS and JavaScript
Last updated: December 14, 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:
<style type="text/css">
div, aside, button {
display: block;
margin: 1rem auto;
text-align: center;
}
@media print {
/* Sets print view with media query */
body * {
display: none;
}
/* Sets body and elements in it to not display */
.print-area, .print-area * {
display: block;
}
/* Sets print area element and all its content to display */
}
</style>
<body>
<div class="print-area">
Print me.
</div>
<aside>
Don't print me.
</aside>
<button id="printBtn">Print</button>
</body>
<script type="text/javascript">
document.getElementById('printBtn').addEventListener('click', () => { window.print() });
// Prints area to which class was assigned only
</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:
<style type="text/css">
div, aside, button {
display: block;
margin: 1rem auto;
text-align: center;
}
@media print {
/* Sets print view with media query */
body * {
display: none;
}
/* Sets body and elements in it to not display */
.print-area, .print-area * {
display: block;
}
/* Sets print area element and all its content to display */
}
</style>
<body>
<div id="the-content">
Print me.
</div>
<aside>
Don't print me.
</aside>
<button id="printBtn">Print</button>
</body>
<script type="text/javascript">
function areaPrint() {
const areaToPrint = document.getElementById('the-content');
// Select element to print
areaToPrint.classList.add('print-area');
// Adds print-area class to element
window.print();
// Prints area to which class was assigned only
}
document.getElementById('printBtn').addEventListener('click', () => { window.print() });
</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
- MDN Web Docs: window.print()
- W3Schools: CSS Media Queries
