Printing in JavaScript

May 14, 2008 · Print This Article

Have you ever been asked by customer to create Print button, or “Print Article” feature. I am sure it happened to you, and if not learning something new is always a good thing.
JavaScript does not offer to many way to print, actually there is only one method available to you, it is:

window.print();

JavaScript print function performs the same operation as “Print” function of your browser. You can think that this function is useless, but it is not. It can help you creating more user friendly applications. Below example shows how to print a webpage on button click.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Print Example 1</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nec 
orci. Cras pellentesque velit a libero. Phasellus est justo, mollis ut, 
euismod et, consequat a, odio. Maecenas elit neque, tincidunt sed, 
dignissim vel, molestie eu, justo. Vivamus neque. Suspendisse mollis magna 
quis tortor. Sed malesuada nisl id velit. Vestibulum vel neque. Nam 
vestibulum. Donec ultrices dui et dui. In neque. Vivamus ut augue. 
Aenean lobortis magna ac massa. Suspendisse lacinia. Morbi vulputate 
pharetra felis. Vestibulum faucibus. Integer mattis elementum metus.
 Nulla adipiscing dapibus erat. Proin dignissim pharetra dolor. 
<br/>
<input type="button" value="Print" onclick="window.print();" />  
</body>
</html>


You can check live demo here.
Another handy example of using this function is for web pages that server articles. Many times you want to give users the ability to print the article but without any advertisements or graphics, this can be easily accomplished by creating link like this

<a href="exampleprint2.htm" target="_blank">Print this article</a>

target=”_blank” will open web page in new window. The webpage with article invokes window.print(); in onload event of tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Print Example 2</title>
</head>
<body onload="window.print();">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nec 
orci. Cras pellentesque velit a libero. Phasellus est justo, mollis ut, 
euismod et, consequat a, odio. Maecenas elit neque, tincidunt sed, 
dignissim vel, molestie eu, justo. Vivamus neque. Suspendisse mollis magna 
quis tortor. Sed malesuada nisl id velit. Vestibulum vel neque. Nam 
vestibulum. Donec ultrices dui et dui. In neque. Vivamus ut augue. 
Aenean lobortis magna ac massa. Suspendisse lacinia. Morbi vulputate 
pharetra felis. Vestibulum faucibus. Integer mattis elementum metus.
 Nulla adipiscing dapibus erat. Proin dignissim pharetra dolor. 
<br/>
</body>
</html>


You can check live demo here.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlinkList
  • description
  • Furl
  • Live
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati
  • YahooMyWeb

Comments

4 Responses to “Printing in JavaScript”

  1. doctype html public on May 18th, 2008 11:01 am

    [...] new is always a good thing. JavaScript does not offer to many way to print, actually there is only ohttp://www.rotsystems.com/articles/printing-in-javascriptLinked by Thom Holwerda on Thu 24th Aug 2006 20:25 UTC OS NewsMicrosoft is releasing for public [...]

  2. DON on June 26th, 2010 1:50 pm

    Pillspot.org. Canadian Health&Care.No prescription online pharmacy.Special Internet Prices.PillSpot.org. Vitamins@buy.online” rel=”nofollow”>.…

    Categories: Mental HealthBlood Pressure/Heart.Anti-allergic/Asthma.Antidiabetic.Vitamins/Herbal Supplements.Mens Health.Eye Care.Antidepressants.Antibiotics.Stop SmokingStomach.Skin Care.Weight Loss.Anxiety/Sleep Aid.Antiviral.Womens Health.Pain R…

  3. Toner on August 30th, 2010 1:05 am
  4. packets on August 30th, 2010 7:46 am

    packets http://kfasconyw4am.BEDROOMPROPERTY.INFO/tag/Baby’s+Breath+packets+Baby/ : packets…

    Baby…

Got something to say?

You must be logged in to post a comment.