<div id=contentstart>
Then, on the appropriate pages, we created a link to call the JavaScript
function below.
<a href="javascript:PrintThisPage();" >Printer Friendly Version</a>
By grabbing the div tag's .innerHTML value, we automatically strip out
all of the header and footer content. In the example below, we use
JavaScript to open a new window and send the printer friendly content
to a new page.
function PrintThisPage()
{
var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
sOption+="scrollbars=yes,width=750,height=600,left=100,top=25";
var sWinHTML = document.getElementById('contentstart').innerHTML;
var winprint=window.open("","",sOption);
winprint.document.open();
winprint.document.write('<html><LINK href=/eggheadcafe.css rel=Stylesheet><body>');
winprint.document.write(sWinHTML);
winprint.document.write('</body></html>');
winprint.document.close();
winprint.focus();
}
|
If your web application is going to have problems utilizing the document.write method,
you could also do the following instead:
We'll need to create a real asp page. I called this print.asp. Here is the minimum
HTML/JavaScript that would need to go in your print.asp page. Essentially, we use
this pre-existing print.asp page to "pull" the html out of the parent page and load
it into another div tag in our print.asp page when the onload event in the body fires.
<html>
<head>
<script language=JavaScript>
function GetPrintContent()
{
var PrintDiv = document.getElementById('printcontent');
var ContentDiv = window.opener.document.getElementById('contentstart');
PrintDiv.innerHTML = ContentDiv.innerHTML;
}
</script>
<body onload="GetPrintContent();">
<div id=printcontent> </div>
</body>
</html>
In our parent page that holds the content we want to print, we still have our
contentstart div tag.
<div id=contentstart>
We still have the link to print the page.
<a href="javascript:PrintThisPage();" >Printer Friendly Version</a>
In the example below, we use JavaScript to open a new window and
launch our new print.asp. Notice that we are no longer using document.write
to send content to a window. The print.asp page is now pulling that same content.
function PrintThisPage()
{
var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
sOption+="scrollbars=yes,width=750,height=600,left=100,top=25";
var winprint=window.open("print.asp","Print",sOption);
winprint.focus();
}
|