Adding a print option on your HTML page

Companies and individuals are doing great efforts to print less and “go green”. However, as a web developer, you may still want to add a print option on your website. Printing out a webpage is still often used on some types of website, so offering an easy to use button or link is a good practice for your visitors.

Using HTML code and a bit of Javascript, adding a print option to your HTML website is easy. The link will open up a print dialog so your website visitors can then choose a printer, the quality of the paper and so on.

Add the following HTML and JS code to your website or blog:

<a href="#" onclick="window.print();return false;" title="Click to print this page">Print this page</a>

Open up your favourite text editor and see how it goes! This piece of code should work also for mobile devices who have Javascript enabled and a the printer functionality enabled. Instead of a link, you may want the picture of a printer. This is visually more appealing and will more likely be clicked on more by your audience, since the print icon is so recognisable. To replace the text link with an image, use the following code example:

<a href="#" onclick="window.print();return false;" title="Click to print this page"><img src="printer.png" /></a>

 

Author Bio

Thank you for your interest in my blog! On this miniblog, I write mostly short (technical) blog posts that might interest other people. Read more about me or feel free to contact me.

 

Leave a Reply

Your email address will not be published. Required fields are marked *