In this programming tutorial we will learn how to print using javascript with print preview window using javascript. We will also learn how to print the whole web page and how to print the specific area of a web page using javascript. So let’s start.
Print using javascript
If you want to give your user the functionality to print the whole webpage then it is better approach to use built-in print function window.print() of javascript. Let’s have a look over how to use this function for hyperlink and for input button.
For Hyperlink:-
For Button:-
The javascript code will execute when you use the command "javascript:" inside the hyperlink’s href attribute.
print() is a built-in method of window object. The interesting thing of this window.print() command is that it doesn’t immediately fire the print, it actually brings the print dialog and then its depend upon user to continue with print or not.
Printing the specific area of a web page using javascript
Now let’s suppose we have some useful information and we want user to print only that information like product receipt, result card, secret information etc rather than printing the whole web page. Let’s have a look over example given below
I just want to print the content inside the table having id="tbl_display" rather than printing the whole web page that’s why I have given a unique id to that table. We have placed the print button in other table rather than tbl_display so that print button should not be visible during print preview and when we get printed table content.
Now let’s have a look over the javascript code of tablePrint() function.
The scope of the tablePrint() function is not limited to the table, actually it can print div, table etc; it totally depend upon you that which part of web page you want to print by giving the id of that html element to the javascript function.
I declare a variable which is display_setting that contains the attributes of popup window, will appear in front of user, containing the content user wants to print.
The variable content_innerhtml contains the whole innerHtml of tbl_display table so that content inside the table must be printed in proper format.
Using variable document_print I open the popup window that will contain the whole content of the table tbl_display. This popup window will appear in front of user and show the content. Actually this popup window will behave like a print preview window. The print dialog will come immediately after this print preview window, if user continue to print then the print command will go to the printer and then print preview window will be closed but if user don’t want to continue then this print preview window will be self closed because I am using self.close(); function right after self.print();
Case Study:-
Now let's suppose we have a case in which we want to print the specific table but most important thing is that we have some content such as logo of the company inside that specific table, which is invisible to the user but we want to make the logo visible during print preview and printing process and after print preview that logo will again invisible to the user in the web page. Now let’s have a look over example given below.
Here’s the html code.
Now In this html code you can see that it is 99% same as the html code before this example, the only change that I made in this html code is the inclusion of company logo that I don’t want user to see when he visits web page but that logo should be visible while print preview and printing process.
To invisible the logo in web page, I applied the inline css to the image logo which is style="display:none;" and assigned an id to the logo image so that it can be appear during print preview window and printing process, this can be possible using ID attribute of the <img/> in javascript.
Now let's have a look over the javascript code that will make visible the image logo during the print preview and printing process. This javascript code is again 99% same as the javascript code before this example.
Now let's understand the javascript code. In this tablePrint() function, two steps are new. In the first step which is
I am checking through document.getElementById() that if image is invisible then make it visible. And in the second step which is
again I am going to invisible the image so that after performing print preview and printing process, the image must not be visible to the users of the web page.
I try my level best to teach you how to print using javascript with different examples.
Thanks for reading such a lengthy article. Keep in-touch with our programming tutorials.
Happy Coding
If you want to give your user the functionality to print the whole webpage then it is better approach to use built-in print function window.print() of javascript. Let’s have a look over how to use this function for hyperlink and for input button.
For Hyperlink:-
<a href= "javascript:window.print();"> Print this web page</a>
<input type="button" value="Print in javascript" onclick="window.print();">
print() is a built-in method of window object. The interesting thing of this window.print() command is that it doesn’t immediately fire the print, it actually brings the print dialog and then its depend upon user to continue with print or not.
Printing the specific area of a web page using javascript
Now let’s suppose we have some useful information and we want user to print only that information like product receipt, result card, secret information etc rather than printing the whole web page. Let’s have a look over example given below
<html> <head> <title> Print using javascript </title> </head> <body> <p> Some text…………………</p> <p> Some text………………..</p> <p> Some text………………..</p> <p>Some more text…………..</p> <table id="tbl_display" style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <p> Thank you valuable user for signing up.</p> <p> We think you’ve made a bold decision, and look forward to a productive meeting.</p> <p> Please print out a copy of this invitation - it will serve as your boarding pass on this tour. </p> <p> For additional information, you can email <a href="mailto:someone@someone.com">someone@someone.com</a> or call - xxx-xxx-xxxx, xxx-xxx-xxx and look for Mr. Someone.</p> </td> </tr> </table> <table style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <input type="button" value="Print" onclick="tablePrint();"> </td> </tr> </table> </body> </html>
Now let’s have a look over the javascript code of tablePrint() function.
<script language="javascript" type="text/javascript">
function tablePrint()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
var content_innerhtml = document.getElementById("tbl_display").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write('<html><head><title>Print using javascript </title></head>');
document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >');
document_print.document.write(content_innerhtml);
document_print.document.write('</body></html>');
document_print.print();
document_print.document.close();
return false;
}
</script>
I declare a variable which is display_setting that contains the attributes of popup window, will appear in front of user, containing the content user wants to print.
The variable content_innerhtml contains the whole innerHtml of tbl_display table so that content inside the table must be printed in proper format.
Using variable document_print I open the popup window that will contain the whole content of the table tbl_display. This popup window will appear in front of user and show the content. Actually this popup window will behave like a print preview window. The print dialog will come immediately after this print preview window, if user continue to print then the print command will go to the printer and then print preview window will be closed but if user don’t want to continue then this print preview window will be self closed because I am using self.close(); function right after self.print();
Case Study:-
Now let's suppose we have a case in which we want to print the specific table but most important thing is that we have some content such as logo of the company inside that specific table, which is invisible to the user but we want to make the logo visible during print preview and printing process and after print preview that logo will again invisible to the user in the web page. Now let’s have a look over example given below.
Here’s the html code.
<html> <head> <title> Print using javascript </title> </head> <body> <p> Some text…………………</p> <p> Some text………………..</p> <p> Some text………………..</p> <p>Some more text…………..</p> <table id="tbl_display" style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <img src="images/company_logo.gif" id="company_logo" style="display:none;"/> <p> Thank you valuable user for signing up.</p> <p> We think you’ve made a bold decision, and look forward to a productive meeting.</p> <p> Please print out a copy of this invitation - it will serve as your boarding pass on this tour. </p> <p> For additional information, you can email <a href="mailto:someone@someone.com">someone@someone.com</a> or call - xxx-xxx-xxxx, xxx-xxx-xxx and look for Mr. Someone.</p> </td> </tr> </table> <table style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <input type="button" value="Print" onclick="tablePrint();"> </td> </tr> </table> </body> </html>
To invisible the logo in web page, I applied the inline css to the image logo which is style="display:none;" and assigned an id to the logo image so that it can be appear during print preview window and printing process, this can be possible using ID attribute of the <img/> in javascript.
Now let's have a look over the javascript code that will make visible the image logo during the print preview and printing process. This javascript code is again 99% same as the javascript code before this example.
<script language="javascript" type="text/javascript">
function tablePrint()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
if(document.getElementById("company_logo").style.display=="none")
{
document.getElementById("company_logo").style.display="inline";
}
var content_innerhtml = document.getElementById("tbl_display").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write('<html><head><title>print using javascript
</title></head>');
document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >');
document_print.document.write(content_innerhtml);
document_print.document.write('</body></html>');
document_print.print();
document_print.document.close();
if(document.getElementById("company_logo").style.display=="inline")
{
document.getElementById("company_logo").style.display="none";
}
return false;
}
</script>
if(document.getElementById("company_logo").style.display=="none")
{
document.getElementById("company_logo").style.display="inline";
}
if(document.getElementById("company_logo").style.display=="inline")
{
document.getElementById("company_logo").style.display="none";
}
I try my level best to teach you how to print using javascript with different examples.
Thanks for reading such a lengthy article. Keep in-touch with our programming tutorials.
Happy Coding
19 comments:
Nice Article and I learned about how to open a new window and write to it and print it.
But, i am having a slightly different requirement, it will be great if you could help me to solve it.
Here is the requirement:
We present the user with a PNG image which he needs to print. The print is perfect at its 30%. User need to be able to zoom in/out but when he prints the image should print perfectly fine and complete on an A4 size. We can't give any instructions to the user as every text we add on the browser needs to be converted into so many languages and each translation costs us a lot.
Thanks,
Cotton
exactly what i was looking for. great post.
nice job, thanks!
Perfect...Thank You
Thanks! This article is informative and very helpful.
For the logo thing, you could just put them into your document.write as an img tag
i want to hide one column during printing please tell me how to do that?
You can achieve the same by just using another css stylesheet for media='print'
Is there a way to use this same idea to submit a screenshot of the Java page in the form of a PDF page to the user's e-mail client instead of opening up a print dialog box? I can achieve this on my Mac and Safari browser with the print screen command. I choose "print as PDF) and then (mail PDF). But not all platforms or browsers may offer the "Print as PDF' option. Is there a java command that will send a screenshot to the e-mail client automatically?
another way but same concept...
define an hidden iFrame on the page...
put the inner html to another td tag's inner html of iFrame page...
Thank you for a wonderfully informative article!
Can someone help me fix this so that it retains the format of the table I am trying to print with this code??? PLEASE!?!?!
http://www.centralmassyoga.com/scheduleprint.htm
thanks!
using css to print a portion of the page is more easy
Hi It looks quite good article,
I will implement and let you know
Thanks
Rudra
Great script, easy to use. I was getting the print settings window coming up twice after the new window loaded. Had to remove self.print from the code to fix it. Think it just my implementation that has this issue?
I followed this script and have it running OK, but would like to find out how to print the table border.
It prints the text that is inside the table but not the border of the table.
I am using this to print out a coupon and we have a dashed border on the table. It seems that the command "innerhtml" does not print borders. Have also tried putting a border on the cell with no luck.
Anyone have a clue on how to do this?
how would this work with css attributes such as @media print {#header { display: none; }} ?
Hi Author,
I have tried your sample and it works well. But i have used same script into my application and while executing its hanging once printer screen is opened. later i found that if the info or data in the Printable Table is big then its hanging. if the info or data is less then its working as expected. do you have any solution for this
I get "Access denied" on "document.write" when I use IE7. With Firefox it works.
Post a Comment