4Geeks logo
4Geeks logo

Bootcamps

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Academy

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Full-Stack Software Developer - 16w

Data Science and Machine Learning - 16 wks

Search from all Lessons


LoginGet Started

Weekly Coding Challenge

Every week, we pick a real-life project to build your portfolio and get ready for a job. All projects are built with ChatGPT as co-pilot!

Start the Challenge

Podcast: Code Sets You Free

A tech-culture podcast where you learn to fight the enemies that blocks your way to become a successful professional in tech.

Listen the podcast
← Back to How to's
Edit on Github

How to print in javascript

Written by:

How to print in JavaScript

The code to open the print dialog in JavaScript is as follows:

1window.print()

Window Print Method

Syntax:

1window.print()
  • Parameters: Doesn´t receive any
  • Returns: Nothing, zero, zip, nada

This method will open up the print dialog for the current document and gives you all the options as it would if you use ctr+p or click print on the browser menu. It will print the full document, from top to bottom.

Events beforeprint and afterprint

The beforeprint and afterprint events allows changes to happen on the page printing target. Let´s say you gave a banner or publicity even a sidebar or the footer and you don’t want it to be printed, you can use these events to hide and restore them.

As mentioned before, it´s an event, so we use it as one:

Syntax:

1addEventListener('beforeprint', (event) => { }); 2onbeforeprint = (event) => { };

Usually, you´ll want to use a @media_print CSS instead, but there are times these events are the right way to go.

Using @media print

Media types are used to describe general categories of the devices consuming our website. As developers, we design website focused on screens but there´s more than just screens, like printers or screen-readers!

How to target printers with CSS?

Syntax:

@media print {}

Using this CSS rule, you can target and specify how you want your website to visualize on paper. For example, let say that you want to hide your <nav> an <aside>containing adds and change your anchor tags <a> to be black colored with no underline and the background color of a class to white when printing:

1@media print{ 2 nav{ 3 display: none; 4 } 5 6 aside { 7 display: none; 8 } 9 10 a{ 11 text-decoration: none; 12 color: black; 13 } 14 15 .myclass { 16 background-color: white; 17 } 18}

This way we are designing how our website will look like once it´s printed and prevent an ugly paper representation of our work.

Remember, in-line styles will override, as usually, all CSS rules we established on our @media print!

How to print in JavaScript only the part of the content we want?

So far, we´ve learned how to print in JavaScript using with the window.print() method and that we can use beforeprint and afterprint to change the composition of our website before and after the printing event executes. We also covered how to, using @media print, hide or modify CSS rules of the elements in our website for printing purposes. The only question left to answer is: How to print only a part of the website, let´s say, the main article where the news is.

We can achieve this by using just a tiny little bit of JavaScript:

1const Print = () =>{ 2 let contentToBePrinted = document.querySelector(.class” OR “#id”).innerHTML; 3 let websiteContent = document.body.innerHTML; 4 document.body.innerHTML = contentToBePrinted; 5 window.print(); 6 document.body.innerHTML = websiteContent; 7}

Let´s check the code above in details:

1let contentToBePrinted = document.querySelector(.class” OR “#id”).innerHTML;

Here we store the content of the class or id we want to print on a variable.

1let websiteContent = document.body.innerHTML;

Now we store in a variable the whole body structure and content

1document.body.innerHTML = contentToBePrinted;

Then, we assign the stored value of contentToBePrinted to the document body which will be printed

1window.print();

We are now actually executing the print method on the window

1document.body.innerHTML = websiteContent;

We restore our website content and structure

Conclusion

We´ve covered how to code in JavaScript using the window.print() method in different ways (printing the full website or just a part of it). We mentioned events linked to printing, with which we can modify with JavaScript the structure of the website beforeprint and afterprint We´ve discussed how to modify the CSS only for printing purposes and gave examples on how to do all that.

I hope you enjoyed the reading and keep on the Geek side!