How To Do A Printer Friendly Pop Up That Has Information From The Original Web Page

8 07 2010

Well that’s a bit of a lengthy title isn’t it! I wasn’t really sure what to call it. I’m sure this could be used in other ways too, but in my case I wanted to create a printer friendly pop up page, that took information from my ASP.net page to present in the pop up. I’ll show the C# code first but then will also show you just the javascript without all the added double quotes and various other symbols that may cause confusion. Also apologies for the somewhat messy code listing for the C’# part, I may need to consider a change of theme soon!

IMPORTANT NOTE: The web site I was doing this in is in .NET 1.1 so I am using the RegisterClientScriptBlock from the C#. This method is obsolete from 2.0 upwards so you should look to replace it with it’s correct newer method.

RegisterClientScriptBlock("PrintWindow", "<script language=\"javascript">\" + @"
var content = '" + infoLabel.Text + @"';
var printFriendly=window.open('','PrinterFriendly','toolbar=no,menubar=no,width=1000,height=600');
printFriendly.document.open();
printFriendly.document.write('<html><head><title>Printer Friendly Pop Up Page</title></head>');" +
"printFriendly.document.write('<img src="\"Images/ProgressPrintHeader.png\"" /><h1>');" + @"
printFriendly.document.write(content);
printFriendly.document.write('</h1>');
printFriendly.document.write('<h5>Printed on ');
printFriendly.document.write('" + DateTime.Now.ToString("dd MMMM yyyy") + @"');
printFriendly.document.write('</h5></body></html>');
printFriendly.document.close();
printFriendly.focus();
</script>");

Now for just the javascript code on it’s own, without all the squiffy formatting and confusing symbols!

var content = 'Text from original page';
var printFriendly=window.open('','PrinterFriendly','toolbar=no,menubar=no,width=1000,height=600');
printFriendly.document.open();
printFriendly.document.write('<html><head><title>Printer Friendly Pop Up Page</title></head>');
printFriendly.document.write('<body onLoad="self.print()"><img src="Images/ProgressPrintHeader.png"></br></br><h1>');
printFriendly.document.write(content);
printFriendly.document.write('</h1></br></br>');
printFriendly.document.write('<h5>Printed on ');
printFriendly.document.write('Today's date');
printFriendly.document.write('</h5></body></html>');
printFriendly.document.close();
printFriendly.focus();

It’s important to use the document.close() method, otherwise your print dialog will never pop up because as far as your browser is concerned, the document is still being written.

So as you can see, in order to take the text from my original ASP.net page into my pop up, I am referencing the label that the required text is in. It is also possible to do it using javascript if you are not using ASP.net or anything similar.

If I had the text I wanted to print within div tags for example:

<div id=”print”>All text to be printed</div>

then I could then retrieve that text using:

document.getElementById(‘print’).innerHTML;

I hope that all makes sense! Feel free to comment if I have well and truly confused you 🙂

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: