How To Add A Print Button To Your Web Page

posted on May 25, 2011 by Ryan Dube

You know, something like adding a print button to a web page sounds pretty simple, right? In fact, why do we even need to add any print button or link to the page at all, when all the reader has to do is click on “File” and “Print…” in the browser menu?

Ultimately, different people want the print feature on their webpage for different reasons. You may just want to add convenience. When the reader can just click a button to get a printout â€" it saves a few clicks, and every click counts. Other people want to customize the printed text â€" in other words, hide certain elements of the page from the printout. In other situations, people prefer creating a carefully customized, printable version of the website.

For each of these situations, there are different solutions. We’ve always tried to offer innovative print solutions here at MUO, such as Justin’s article about printing on half-pages and Karl’s article on PrintWhatYouLike. In this article I’m going to provide four ways that you can integrate a printing button or link into your website â€" from the very simple HTML and Javascript approach, to the more customizable CSS approach.

Integrating Printing Into Your Website

When you look at any webpage, it’s pretty easy to see why you may want to customize the printout. A typical webpage has ads, banners, ad links, sidebars and footer sections that do nothing more than eat up page space and wastefully consume paper.

If you have a fairly simple website, or you don’t really care whether or not all of the graphics and formatting prints, then all you have to do is add a simple button to your webpage and use the “print()” javascript method to send the webpage to the printer.

Placing this code into your site at a location that’s quick and easy for your readers to use looks something like this.

All the reader has to do is click the button and the page will get sent directly to the printer without any page formatting whatsoever. If the page is beyond the printable width for the printer, it’s possible you could end up printing out far more pages than is actually necessary.

Some people don’t really like the appearance of a form button, so as an alternative you can simply use a link with the embedded javascript to do the exact same thing.

You can see how in many cases a simple text looks much cleaner than a button, but which you use really comes down to which looks better in the area of the webpage where you want to provide the print feature.

As you can see from the example printout above, the formatting of many ads and banners don’t perfectly match the browser display when you simply use the print command. This becomes much more apparent for more complex websites. Another approach people use is to block entire sections of the website using CSS, and assign specific sections of the page to print. You do this by first linking the CSS file in the header section.

Next, you’ll need to create the actual CSS file and save it in the same directory as your webpage. The CSS file should assign all of the sections of the page that should not be printed, and then also make the elements of the page you assign to print as visible.

Now that your CSS file is set up, all you have to do is go through your page and tag each section with the “print” class.

Now you can see in the printout where only the sections of the page marked with the “print” class get printed to the page, and all other sections don’t. The one difficulty with this approach is that you have to make sure to turn off the display for all DIV sections that you don’t want printed. As you can see below, I didn’t add the “div” section for the Google Ad, so that still printed.

It can take some time to build the CSS file and lay out the classes correctly. If you really don’t want to bother doing this on every page, then you may opt for one last approach. This is my favorite technique for providing perfectly formatted, printable versions of the webpage. All you have to do is create a PDF formatted version of the webpage content, save it on your web host, and then link the file in the header of the page.

That’s all you have to do! You can embed the print button on your site just like in the examples above, but instead of the CSS file loaded for the print method, the PDF, DOC or other file is sent to the printer. As you can see below, this generates the cleanest printable version of your page, and you can pretty much customize it to look exactly how you want it to.

As you can see, there are plenty of options to choose from when you want to place a print button or link on your webpage. Any of these choices work well, but the right choice really comes down to how complex the webpage is, and what content you want to offer your readers when they choose to print your webpage.

Have you tried any of these techniques to add a print button to a web page? Which technique do you like best? Do you have any other solutions? Share your insight in the comments section below.

Image Credit: Sundeip Arora

Powered By WizardRSS.com | Full Text RSS Feed | Amazon Plugin | Settlement Statement | WordPress Tutorials

I'm reading: How To Add A Print Button To Your Web Page