A blog probably of interest only to nerds by John Morton.

12Jun2011

Auto Print an HTML Page

I recent­ly worked on a project for a client who want­ed to allow a user to view and print a num­ber of recipes direct­ly from a Flash ban­ner. There were all the oth­er ways of inter­act­ing with the recipes as well, like email­ing, shar­ing on Face­book, and shar­ing on Twit­ter. (I don’t go into those oth­er thing in this post, but you can find me talk­ing about how to do things like that else­where on SuperGeekery.)

Addi­tion­al­ly, the client want­ed these same recipes sharable and acces­si­ble from their web site. Those site-based recipes also need­ed to be printable.

I want­ed a solu­tion that didn’t end up cre­at­ing mul­ti­ple ver­sions of the recipes. There were already many mov­ing pieces in the project and hav­ing mul­ti­ple ver­sions of those recipes float­ing sim­ply increased the chances of errors creep­ing in.

The Goal — one recipe to rule them all.

The solu­tion was to build a sin­gle HTML page for each recipe that had a print but­ton that would trig­ger the print­ing func­tion­al­i­ty. We also need­ed some mech­a­nism to trig­ger print­ing on load when that URL was accessed from the Flash ban­ner. (I also had an addi­tion­al goal of keep­ing each recipe short enough to fit on a sin­gle print­ed page.)

First take a look at a sam­ple recipe.

http://​supergeek​ery​.com/​a​u​t​o​-​p​r​i​n​t​a​b​l​e​-​h​t​m​l​/​s​a​m​p​l​e​_​r​e​c​i​p​e​.html

You’ll see a basic recipe with a print but­ton that trig­gers the print func­tion of your com­put­er. Being able to print via a but­ton click requires javascript, but the print but­ton is hid­den when there is no javascript on the page in the noscript tags at the bot­tom of the page, so you’ll only see it if you do have javascript available.

Now take a look at the same URL that we used when call­ing it from a Flash ban­ner. It’s the same URL, but with GET vari­ables added to the end:

http://​supergeek​ery​.com/​a​u​t​o​-​p​r​i​n​t​a​b​l​e​-​h​t​m​l​/​s​a​m​p​l​e​_​r​e​c​i​p​e​.​h​t​m​l​?​p​r​i​n​t​=true

One you click on that link, it should launch the recipe like before but now your print dia­log box should also appear.

Step 1: Build the HTML & CSS

If you looked at the HTML for the sam­ple recipe, you’ll see it uses tables to keep the graph­ics all lined up. This was orig­i­nal­ly built to also be used as an HTML email. That’s why it looks like HTML from 1997. :-) That’s just the state of mak­ing HTML emails. Typ­i­cal­ly you wouldn’t use tables to align your graphics.

There were a num­ber of recipes that were in this col­lec­tion and some of them were long enough that they made the recipes spill over onto a 2nd page. We want­ed to keep each recipe to a sin­gle page , so the big burg­er image need­ed to be replaced at the bot­tom of the page for printing.

The print style sheet basi­cal­ly turns off burg­er image at the bot­tom of the page with a sol­id rule, leav­ing the clean­base’ image, a sol­id rule, on. The web style sheet does the opposite.

From the Web style sheet:

#cleanbase {
	display: none;
}

From the Print style sheet:

#fullburgerimage {
	display: none;
}

The both style sheets also hide the Print” but­ton so that it’s not vis­i­ble unless told to be vis­i­ble by the Javascript.

Step 2: Use Javascript to make the print but­ton work.

As I said before, none of what we’re going over is new. It’s just putting togeth­er sev­er­al well-known tech­niques in a sin­gle page. It just works and that makes it handy to know.

The print func­tion is sim­ple javascript. You print the con­tents of the win­dow ele­ment like this:

window.print();

Now we just need to have that func­tion trig­gered when a user clicks the print button.

// Send coupon to printer 
$('#printbutton a').click(function(event){
	event.preventDefault();
	window.print();
});

Step 3: Check­ing the GET vari­ables and trig­ger­ing the print function

In the jQuery document.ready func­tion, I want­ed to check for the vari­ables passed into the page via the URL, basi­cal­ly, I want­ed to check the GET vari­ables. Doing this in PHP would have been sim­ple, but I want­ed to use Javascript to do this.

Stack Over­flow to the res­cue. Here’s a great lit­tle func­tion to do that very task.

function $_GET(q,s) { 
	s = s ? s : window.location.search; 
	var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i'); 
	return (s=s.replace(/^\?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined; 
}

Now you just need to test to see to see if print’ is true’. If it is, we trig­ger the print win­dow func­tion when the doc­u­ment is ready.

if ($_GET('print') == 'true') {
	window.print();
}

Step 4: Fin­ish­ing up

There are a few addi­tion­al things this sam­ple doesn’t show that you could do.

  • Add the Open Graph meta data for this page.
  • Add Face­book like’ and shar­ing’ buttons
  • Add a Twit­ter share button
  • Build a email this func­tion­al­i­ty to this page.
  • Add Google Ana­lyt­ics to the page to see how peo­ple are using it.