How to print only a selected HTML element?

Question

I am trying to implement a print feature in HTML. I know I can print the whole page with window.print(), but how do I print only a specific page element? For example a particular <DIV>Some text to print</DIV>.

Answer 1

You could use a print specific CSS stylesheet and hide everything but what you want printed.

<div class="no-print">I won't print</div><div class="something-else">I will!</div>

Just the no-print class will be hidden, but anything with a print class will show.

<style type="text/css" media="print">    .no-print { display: none; } </style> 

Answer 2

If you are familiar to jQuery, you can use jQuery Print Element plugin like this:

$('SelectorToPrint').printElement();