Just use window.print() and the entire page gets printed.
But the problem is exactly that , the entire page gets printed.
If you have a print button , the print button gets printed as well.
If you want only a specific portion of your page to get printed , you can’t do that in a straightforward way.
Here is a recipe to overcome these problems:
STEP1: Create a HTML page with exactly the contents you want to print
STEP2: On onload() method of this html page body , call window.print() , so that when the page is loaded print functionality is triggered
STEP3: Place the print button on the page you want the user to trigger the print button.
STEP4: On click of the print button , open the html page that you created with the print contents (using window.open() method)
STEP5: Use the inbuilt onafterprint() method to close the print window once the print is completed (use window.close() method inside it).
Here is a demo:
Let me create a html page where I want to implement the print functionality:
This page does nothing other than displaying the message “This is my home page” and providing a print button to the user.
When user clicks the print button we are just opening another page in the same path “print.html”.
Here is the home page:
Here is the print.html page:
<html> <body> Here is my print content: Hello World! </body> </html>
Here is the print page:
We want to print the above page rather than just open it in a separate window.
To do this , on the onload method of this page call window.print():
Now when you click print button in the home page , print is triggered:
There is one issue here.
When you finish printing , the user is shown print.html page .
But we want to return to the home page.
To enable this use onafterprint() method like below:
Now when you click on print button in the home page , the contents in the print.html page get printed and also the user is redirected to the home page as the print window gets closed.
A seamless experience for the user!
You have absolute control as what to show and how to present them on your printed page using the above recipe!
Leave a Reply