“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 webpage, the best way is to place a printer icon in an appropriate place to trigger the print dialog box. You can easily do this with the help of simple JavaScript code. 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 here is to link this JavaScript command to HTML image tag. In this way, you can trigger the print popup dialog box by clicking 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”. You can right-click and select “Copy Image Address” option in Chrome browser to get the image URL.
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 image URL with your own. If your image has different size then control the size with proper 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, Edge, Firefox, Safari, etc. Click on the printer icon and the print dialog box should open similar to pressing “Control + P” or “Command + P” shortcut.
Users can either take a physical print out or save the webpage as a PDF file. 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 is popping up.
You can change the background and border colors of the printer icon according to your image and site appearance.
Note: As every physical print out will kill trees, you can insist your users to print only on required pages like forms where physical signature is required.
