Print using javascript

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:-
<a href= "javascript:window.print();"> Print this web page</a>
For Button:-
<input type="button" value="Print in javascript" onclick="window.print();">
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
<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>
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.
<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>
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.
<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>
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.
<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>
Now let's understand the javascript code. In this tablePrint() function, two steps are new. In the first step which is
if(document.getElementById("company_logo").style.display=="none")
{
document.getElementById("company_logo").style.display="inline";
}
I am checking through document.getElementById() that if image is invisible then make it visible. And in the second step which is
if(document.getElementById("company_logo").style.display=="inline")
{
document.getElementById("company_logo").style.display="none";
}
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

19 comments:

  • Anonymous
     

    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

  • versak
     

    exactly what i was looking for. great post.

  • Anonymous
     

    nice job, thanks!

  • Ali
     

    Perfect...Thank You

  • Anonymous
     

    Thanks! This article is informative and very helpful.

  • Anonymous
     

    For the logo thing, you could just put them into your document.write as an img tag

  • Anonymous
     

    i want to hide one column during printing please tell me how to do that?

  • Anonymous
     

    You can achieve the same by just using another css stylesheet for media='print'

  • Anonymous
     

    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?

  • Anonymous
     

    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...

  • adam
     

    Thank you for a wonderfully informative article!

  • Anonymous
     

    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!

  • Ozan K.
     

    using css to print a portion of the page is more easy

  • rudru
     

    Hi It looks quite good article,
    I will implement and let you know
    Thanks
    Rudra

  • Justin
     

    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?

  • BGS Grafix
     

    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?

  • Prototype
     

    how would this work with css attributes such as @media print {#header { display: none; }} ?

  • Anonymous
     

    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

  • Anonymous
     

    I get "Access denied" on "document.write" when I use IE7. With Firefox it works.