How to add print button in web pages?

To add print button in web pages or web applications is quite user friendly and efficient for the users as well as for admin to print the generated reports immediately from the back-end if he uses ERP software. There are few third party plugin to add print button but those are not free, you may have to purchase or if you use their free version you will receive ads from those plugin which is much terrible. So why not make a simple print button yourself (if you already familiar with basic level of  programming)  for printing a specific div or page layout or the whole web page.

Now i will show you simple method as example to add print button in your webpages or web applications. I will show you how to do that by using simple few lines of JavaScript.

First i will write a simple function for printing the div or layout of the web page.

<script>
    function printFunction() {
        window.print();
    }
</script>

The printFunction is function of this js code which will execute the printing using window.print() command.

Now add a print button tag in the desired div or within the tag of your web page where you want to add a print button.

    
<button type="button" class="btn btn-info" onclick="printFunction()">Print </button>


Here inside the button printFunction() has been declared.  So this is how you can add print button in web pages or web applications easily.

Atik Babu

I am a software engineer having several years of experiences in web development since July 2013. I have expertise on Python, TensorFlow, .NET, Visual Basic, PHP, MySql, CodeIgniter, JavaScript, Jquery HTML5, CSS3,WordPress and Opencart. Besides i have been developing my expertise on machine learning and currently doing some IoT projects.

One thought on “How to add print button in web pages?

Leave a Reply

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