Page 1 of 1

Detect printing with CSS & ASP.NET/PHP Rate Topic: -----

#1 Imdsm  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 103
  • View blog
  • Posts: 362
  • Joined: 21-March 09

Posted 25 September 2010 - 12:39 PM

Detecting printing with CSS & ASP.NET/PHP
Original article on my blog @ http://imdsm.blogspo...css-aspnet.html

Detecting printing isn't exactly something which is offered, well, anywhere. It's not exactly supposed to be possible, for privacy reasons and whatnot, and there aren't really any triggers in html, css, or javascript (that I know of). But at work I _had_ to detect it, and as Google came up trumps for me, it probably has for you too. So I'm going to show you a REALLY simple way to detect printing.

Firstly, you need to know about cascading stylesheets (css files), if you're attempting this then you will already know about these. Well, you can tell the browser to use certain stylesheets for different media types, for example, you can set one stylesheet for the screen, one for printing and even a stylesheet for braille readers for blind folks.

I initially tried to put a file inbetween the print media css file, and then forward the stream on, this worked great except every browser nowadays requests -all- the stylesheets on page load, privacy and all that palava. So that didn't work, but then I had a great idea!

"Surely it won't download all the images unless they're needed?" I thought, and I was right (as usual ;)).

So, all you simply have to do is have script (either ASP.NET or PHP will do, and another if you have one), and set that as an image in the print media css file! Simples? Simples!

Anyway, I will stop babbling now and show you the code. I have included the screen css, as you probably will want to separate them. That one isn't required though.

In the page, put these inbetween <head> and </head>:
<link rel="stylesheet" href="screen.css" media="screen" type="text/css" />
<link rel="stylesheet" href="print.css" media="print" type="text/css" />

And in the print.css file, for ASP.NET, put this:
body { background: url(PrintTracker.aspx); }

Or for PHP:
body { background: url(PrintTracker.php); }

And then in that file, you can put your tracking code.

That's it, easy peasy when you think about it!

So, just to recap, what happens is this:

- You have two css files, one for the screen and one for printing.
- The web browser goes to your page and downloads both.
- It then processes the screen one and downloads resources to show on the screen.
- The client then prints, at which point it goes through the already downloaded css and downloads any resources needed to print. This only happens ONCE they have tried to print the page, therefore, you can count it as a print.

If you have any questions, or problems, just send me a message, I'll be happy to help!

For more tutorials, snippets and awesome discoveries, visit my blog by clicking here.

Is This A Good Question/Topic? 2
  • +

Page 1 of 1