How to Add a Print Button to a Web Page

How to Add a Print Button to a Web Page
Page content

JavaScript and Printing

Many people are interested in providing their users the option of printing the current web page by adding a print button to a web page. In concept, the workings of the web browser that allow for such an event are extremely simple, but the implementation of said action can prove to be an entirely different story. The JavaScript command “window.print()” will open the print window dialog for the user, giving them the standard print options they are used to. Calling the window’s own print method is a great technique since it will prompt the user with the standard print dialog box for further options. As with any JavaScript method, this can be applied to any event (load, click, etc), and serious consideration should be given to both placement and execution of this action.

Styling Your Page For Print

In addition to simply giving your user the option for printing the current page when you add a print button on your web page, you should also seriously consider styling your page for print. Those of you with an understanding of CSS (Cascading Style Sheets) may already realize the importance of styling for print as well as how easily it can be done. Most modern web pages use CSS to style the elements on the page, but some website owners do not realize you can assign multiple different styles for the context of your page. By assigning two style sheets (each with the media attribute declared as “screen” and “print” respectively), you can easily tell the computer how to render your page for print.

What is the use of taking this extra step, you may ask? Consider the scope of this article. If you are to add an anchor or button on your page that offers the visitor a way to print your page from within the content, do you want that button to actually show up on the printout? My preference is a resounding NO! To circumvent this, you can add a print style sheet that hides any and all unwanted page attributes from the printed content (headers, footers, etc).

Implementing the JavaScript Print Button

Ideally, as mentioned above, we want to attach the execution of the print method to the button in as unobtrusive a way as possible. In this example, you can see that I am finding the “print-it” button upon page load and attaching the click listener to it. There are actually a couple different things to note in this example.

First, notice that the content text changes between the screen render and the print preview. This exemplifies the recommendation previously made to attach a print style sheet. Generally speaking, it’s not a good idea to completely change the content of a page, but for this example, it serves the purpose well.

Next, notice that clicking the button does indeed pop up your standard browser print dialog. By examining the source code, you can easily see the snippet of JavaScript code necessary to perform this action. By wrapping this action in further code, you can quite easily prompt the user for additional information, have them confirm they do indeed wish to print or execute any number of other appropriate activities.

Conclusion

While adding a print button on a web page can seem very useful on the surface, I would caution against its over-use. There are definitely times where it is very applicable, but in some cases, by bypassing the normal browser interaction, it is possible to confuse a user. Another thing to consider is actually writing a print version of the page or even a print script that removes unwanted markup from the final version. This can be more flexible than simply attaching a print style sheet and gives you a permanent reference to which you can link from elsewhere on your site. Suffice to say that, as with so many other tools, use it wisely!