Hide specific elements while printing web page

We know that how to print a web page using JavaScript. Window.print() function is awesome and will do this job. But how to hide specific elements while printing a web page certainly annoying.
Think that you have built invoice  module in your web application. You have nicely built it. User can easily create the invoice.

Invoice
But think how will you hide that print button when user will click on print.
You can solve this problem by using css media query print
@media print {
      .print {
          display:none
       }
}
Now apply this print class to all those elements which you do not want to print. Thanks it.
As a best practice do not apply print class to every element instead wrap all the elements with div and apply print class to it if all elements are nearer. If elements are placed at different locations so in that case only apply print class to separate element.
Let’s take a small example.

When you run above html in browser you will see below page.
See In above example when you click on print button it will not print the “Print” Button.
Print_example
When you click print, you will see below page which ask you to print the page from browser.
print_preview
Thanks
-Ahesan
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s