How to print in javascript

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!