Media print css Using Javascript

Posted By : Rajan Rawat | 21-Nov-2017

css

You can print the webpages, but i think you know that already. You dont't need it very often, beacuse when ever we print they often to ugly, or its in a complete mess. But i think probably don't know that we can actually define a seprate css for that using the media queries for webpages and we can translate into a letter or a A4 document

Let's take a quick look at how we can write media queries for printable and exportable content. It's super-easy, it'll only take a minute! We'll use this Adobe XD keyboard shortcut cheatsheet from my blog/website as an example.

Now let's see that how it works. we have to write the media query for the printable content and exportable content. The process is very easy, it will take just one minute.

Step 1: Media Queries for Print CSS

Firstly we have define media query for print i.e given below

               @media print {
                          /* styles here */
                 }

You can write this in bottom of your css stylesheet,

Step 2: Redundancy Hiding

whenever a user donwload a webpage as pdf, then there is some element we don't need like

UI elements
Header/footer
Sidebar content
Forms and CTA

So we need to hide these elements while printing the page using the diplay:none property. so code will be as given below

                @media print {
                         header, footer, aside, form, … {
                        display: none;
                         }
                   }

Step 3: Customization of Page Margins

For defining the page margins and stacking contents please use the cm instead of px. Beacuse the browser are very efficient in this so you have define your own margins

so code will be just given below

                @media print {
               header, footer, aside, form, … {
                display: none;
                      }
                 article {
                    width:100%!important;
                   padding:0!important;
                   margin:0!important;
                    }
                }
                @page {
                 margin: 2cm;
                  }

Now let's see Full example

<html>
<head>
<style type="text/css">
@media print {
.noprint { display: none; }
.printme { display: block; }
}

#funk {
width: 50%;
border: solid red 3px;
}
.isblue {
border: solid blue 5px;
background-color: lightblue;
}
#zonk {
width: 40%;
}
</style>
<script type="text/javascript">
function printDiv( byId )
{
var divall = document.getElementsByTagName("div");
for ( var d = 0; d < divall.length; ++d )
{
var div = divall[d];
div.className = div.className.replace("printme","noprint");
}
var div = document.getElementById( byId );
div.className = div.className.replace("noprint","printme");
window.print( );
}
</script>
</head>
<body>
<div id="funk" class="noprint">
<h1>Yowser!</h1><br/>
Want to print me?<br/>
<input type="button" value="Then click here!" onclick="printDiv('funk');"/>
</div>
<div class="noprint">
Stuff that will never get printed!
</div>
<div id="zonk" class="isblue noprint">
<h2>Coupon worth $2 million dollars!<h2>
<br/>
<i>Expires April 1, 1932</i>
<br/>
</div>
<a class="noprint" href="#" onclick="printDiv('zonk'); return false;">PRINT $2,000,000 COUPON</a>