The onbeforeprint and onafterprint events of IE
IE supports two proprietary, printer related event handlers that go beyond using CSS alone to create printer friendly pages. Using these events, your JavaScript can actually detect and react to when a page is about to be printed, and alter the page accordingly, reverting the page back when the task is completed. And all this occurs automatically to the user, without any manual interaction.
The two printing-related events of IE are:
| window.onbeforeprint | Fires just prior to the page being printed | |
| window.onafterprint | Fires immediately after the page to be printed out has been loaded into printer queue/cache. |
Note how both are events of the window, and can be defined using either the syntax above inside your script, or as HTML attributes, inside the BODY (ie: <body onbeforeprint="dothis()">) For example:
<body onafterprint="alert('Done printing!')">
<script type="text/javascript">
function simplealert(){
alert('Commenced printing!')
}
window.onbeforeprint=simplealert
</script>
will alert two different messages, one proceeding and another after the document to be printed has been loaded into printer queue. Many people think that onafterprint is fired after a page has completed printing out, which is not true. Instead, as mentioned, it's fired when the printer has finished saving the document at the state it and sent to the printer queue.
With onbeforeprint in one hand and onafterprint in another, how we proceed to creating printer friendly pages depends entirely on the page at hand (whoops, that's three hands!), and the scripting techniques we choose to employ.
Here are a few examples to stimulate the mind in this respect.
-Changing a document's background image/color onprint
If your page's background is either of a dark color or an image, you know they can seriously guzzle your users' printer ink when the containing page is printed out. Be considerate to your loyal visitors, and toss em' out (the background, that is) on page print!
<script type="text/javascript">
function removebackground(){
//Make the document background white
document.style.backgroundColor="white"
//Set the document's background image to null
document.body.style.backgroundImage="none"
}
function revertback(){
//Reload the window
setTimeout("window.location.reload()",50)
}
window.onbeforeprint=removebackground
window.onafterprint=revertback
</script>
Nothing so fancy above that the comments inside can't explain.
-Removing sections of the page onprint
Considering the amount of window dressing most sites carry nowadays, the following example should be of interest to many of you. It removes sections of any page irrelevant to offline viewing before the page is fed to the printer.
Here's the basic idea: We enlist the help of CSS, or more precisely, the "display" property of style sheets, to toggle the existence of elements that should be removed. And to make this process generic, so we can easily specify different elements to remove, depending on the page the script is on, we use the "class" attribute of HTML to identify them.
Here is a script that will remove any section(s) of the page whose class attribute is set to "remove" when the page is printed out:
<script type="text/javascript">
function removeelements(){
var removeclass="remove"
var alltags=document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==removeclass)
alltags[i].style.display="none"
}
}
function revertback(){
setTimeout("window.location.reload()",50)
}
window.onbeforeprint=removeelements
window.onafterprint=revertback
</script>
<body>
<p class="remove"><img src="bannerad.gif"></p>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" class="remove">Left Nav Bar</td>
<td width="80%">Main Content</td>
</tr>
</table>
</body>
