« KeePass Password Safe - Manage all of your passwords easily. | Main | Introduction to AJAX »
September 01, 2006
A Quick Printer-Friendly Page In Javascript
In my job, we often have to make printer-friendly views of pages that do not include various headers, footers, and menus so the user can print out exactly what they need.
This can be done either manually (e.g. creating a new page with the content to be printed from scratch) or by having a separate CSS stylesheet that does not display the header, footer, and menus (make sure media="print" is in the stylesheet declaration).
One thing that we have noticed is that with the CSS solution, users still want the link to the printer-friendly page, even though all they have to do is print the original page and the printer-friendly version will be printed. Therefore, we had to figure out a way to have a printer-friendly link that could be easily added without us having to manually make printer-friendly pages for each page that needs to be printed. Enter Javascript.
The following HTML code has a DIV tag with the content that needs to be printed. The printer friendly link simply opens a new window to the page print.html. Since print.html knows it was opened via another HTML page, it can use Javascript to access the calling page and output the contents of the caller's DIV tag on its own page. Since the only thing showing on print.html will be the content that needs to be printed, the user can manually print that page like they would with a normal printer friendly page.
The advantage of this is that the only code needed is the 1 line of Javascript it takes to access the calling page's DIV tag. A disadvantage is that at this point, the id of the DIV tag must be hard-coded, though I am sure it can be passed to the printer-friendly page with little modification.
Calling Page:
<html><head><title>Calling Page</title></head><body>
HEADER GOES HERE<br><br>
<a href="print.html" target="blank">Printer Friendly Version</a>
<div id="mainContent">CONTENT I WISH TO PRINT</div>
<br>FOOTER GOES HERE
</body></html>
Printer-Friendly Page (print.html):
<html><head><title>Printer-Friendly Page</title></head><body>
<script language="javascript">
document.write(window.opener.document.getElementById("mainContent").innerHTML);
window.print();
</script>
</body></html>
Posted by Chuck at September 1, 2006 11:17 AM
Comments
Awesome tip! Thanks!
I've added AdSense to both Fomdi and DeafRead, and you're right, it ain't so bad.
Hope to read more posts from ya
Posted by: tayler at September 1, 2006 12:29 PM
You could probably get cleaner results by using media print in CSS - like this
Then putting all the extra speshul print stuff in, like a display:none for you sidebar full of links, etc.
Posted by: steve at September 1, 2006 10:55 PM
that would be
[link rel="stylesheet" media="screen" href="/css/main.css" /]
[link rel="stylesheet" media="print" href="/css/print.css"/]
Darned strip_tags().
Posted by: steve at September 1, 2006 10:56 PM