December 14, 2007 —
<a href="#" onClick="window.print(); return false;">Print</a>
… you can also use style sheets to dynamically hide or show sections of the page:
<link type="text/css" href="print.css" rel="stylesheet" lang="en" media="print" />
We’ve talked about CSS before, but this little trick lets you show or hide any items in the DOM only when the page is printed.
For example, at pbrn.ahrq.gov, we had a requirement to allow printing, but the text always seemed to get lost off the right side of the page. The solution was to eliminate the left-hand navigation to save page real estate (who needs that when viewing a printout anyway?), and shrink the top header to the bare essentials. All this was accomplished with some simple JS and CSS, and as you can see, the same page can looks quite different when printing: