How to Add Print This Page Widget on Your Webpage?

“Control + P” and “Command + P” are the shortcuts used to open the print dialog box in Windows and Mac respectively. Though it is commonly used on applications like Word and Pages, many people do not print webpages. If you insist your users to take a print out of any of your webpages, the best way is to place a printer icon in an appropriate place to trigger the print dialog box. This can be done with JavaScript easily. In this article we will explain how to add print this page widget on your webpage.

How to Add Print This Page Widget on Your Webpage?

JavaScript has a default print window command as “window.print()”. What we need to do here is to link this JavaScript command to HTML image tag. In this way the print popup dialog box will be triggered when clicked on the image.

Step 1 – Printer Icon Images

Let us first upload a good looking printer icon image to the website. Below are some of the images you can use.

Get the complete URL of the image once it is uploaded on your site. For example, we use the first image in this example and the URL is be “https://img.webnots.com/2016/10/Printer.png”.

Step 2 – Insert HTML Code

The next step is to add the below HTML code on your webpage where you want to display the printer icon.

<a href="javascript:window.print()">
<img border="0" src="https://img.webnots.com/2016/10/Printer.png" width="50" height="50">
</a>

Ensure to change the URL with your own. If your image has different size then control the size with width and height parameters.

Step 3 – Testing On Browser

Publish your site and open the webpage on a browser. Since “window.print()” is a native JavaScript command to trigger the print dialog, it should work on all browsers like Chrome, Firefox, Safari, etc. Click on the printer icon and the print dialog box should open similar to pressing “Control / Command + P”.

Users can either take a physical print out or save the webpage as PDF. Refer the article on how to convert webpage into PDF on Google Chrome.

Step 4 – Decorating Printer Icon

If you feel the image is so simple and want to add more decorations then use CSS to customize the look. You can add a CSS class to the HTML code like below along with style definitions:

<style>
.printer {
box-shadow: 1px 1px #3f51b5;
background: #03A9F4;
border: 1px solid #ff9800;
border-radius: 10px;
padding: 3px;
}
</style>

<a href="javascript:window.print()">
<img class="printer" src="https://img.webnots.com/2016/10/Printer.png">
</a>

The final widget will look like below and click on the printer icon to see the print dialog box popping up.

The background and border colors can be changed according to the color of your printer icon.