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 sev­er­al recipes direct­ly from a Flash ban­ner. There were oth­er ways of inter­act­ing with the recipes, like email­ing, shar­ing on Face­book, and shar­ing on Twit­ter. (I don’t go into those oth­er things in this post, but you can find me talk­ing about how to do things like that else­where on SuperGeek­ery.)

The client also want­ed these same recipes to be sharable and acces­si­ble from their web­site. Those site-based recipes also need­ed to be print­able.

I want­ed a solu­tion that did­n’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 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 with 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 ad 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.

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 your com­put­er’s print func­tion. Being able to print via a but­ton click requires javascript, but the print but­ton is hid­den when there is no javascript in the noscript tags at the bot­tom of the page, so you’ll only see it if you do have javascript avail­able.

Now look at the same URL we used when call­ing it from an ad ban­ner. It’s the same URL, but with para­me­ters added to the end:

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?print=true

Once 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’d see it uses tables to keep the graph­ics all lined up. This was ini­tial­ly built also to 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 would­n’t use tables to align your graph­ics.

Sev­er­al recipes were in this col­lec­tion, and some of them were long enough that they made the recipes spill over onto a 2^nd 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 print­ing.

The print style sheet turns off the 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 oppo­site.

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 button work.

As I said, none of what we’re going over is new. It’s just putting togeth­er sev­er­al well-known tech­niques on 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 need to have that func­tion trig­gered when a user clicks the print but­ton.

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

Step 3: Checking the GET variables and triggering 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 I want­ed to check the para­me­ters from the URL. Doing this in PHP would have been sim­ple, but I want­ed to use Javascript.

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: Finishing up

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

• Add the Open Graph meta data for this page.
• Add Face­book ​‘like’ and ​‘shar­ing’ but­tons
• Add a Twit­ter share but­ton
• 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.