Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print <div id="printarea"></div> only?

How do I print the indicated div (without manually disabling all other content on the page)?

I want to avoid a new preview dialog, so creating a new window with this content is not useful.

The page contains a couple of tables, one of them contains the div I want to print - the table is styled with visual styles for the web, that should not show in print.

like image 876
noesgard Avatar asked Jan 22 '09 12:01

noesgard


2 Answers

Here is a general solution, using CSS only, which I have verified to work.

@media print {   body * {     visibility: hidden;   }   #section-to-print, #section-to-print * {     visibility: visible;   }   #section-to-print {     position: absolute;     left: 0;     top: 0;   } } 

Alternative approaches aren't so good. Using display is tricky because if any element has display:none then none of its descendants will display either. To use it, you have to change the structure of your page.

Using visibility works better since you can turn on visibility for descendants. The invisible elements still affect the layout though, so I move section-to-print to the top left so it prints properly.

like image 60
Bennett McElwee Avatar answered Sep 25 '22 19:09

Bennett McElwee


I have a better solution with minimal code.

Place your printable part inside a div with an id like this:

<div id="printableArea">       <h1>Print me</h1> </div>  <input type="button" onclick="printDiv('printableArea')" value="print a div!" /> 

Then add an event like an onclick (as shown above), and pass the id of the div like I did above.

Now let's create a really simple javascript:

function printDiv(divName) {      var printContents = document.getElementById(divName).innerHTML;      var originalContents = document.body.innerHTML;       document.body.innerHTML = printContents;       window.print();       document.body.innerHTML = originalContents; } 

Notice how simple this is? No popups, no new windows, no crazy styling, no JS libraries like jquery. The problem with really complicated solutions (the answer isn't complicated and not what I'm referring to) is the fact that it will NEVER translate across all browsers, ever! If you want to make the styles different, do as shown in the checked answer by adding the media attribute to a stylesheet link (media="print").

No fluff, lightweight, it just works.

like image 39
Kevin Florida Avatar answered Sep 22 '22 19:09

Kevin Florida