Introduction

home
about
non-technical introduction
newsletter archive
HTML 5
html5 development center
html5 website gallery
Primers
html
social media and html
ad banners
perl & cgi
asp
javascript
database - sql
HTML & Graphics Tutorials
getting started
backgrounds
buttons
browser specific
colors
forms
frames
html 4.01 tags
html 4.01 ref
image maps
tables
web graphics
Beyond HTML
asp
cascading style sheets
css keyword ref
cgi scripting
dhtml/layers
dot net
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
1 dari 9 6/13/2014 8:08 AM
java applets
javascript
javascript frameworks
javascript keyword ref
javascript script tips
mobile web development
open source cms
php
security
SEO
vb script keyword ref
webmaster tips
webmaster projects
webmaster toolbox
video
xml
general reference pieces
the master list
Need Help?
discussion boards
mentors
technology jobs
Web Development
earthwebdeveloper.com
javascripts.com
Read Accusofts whitepaper Compressing PDFs for Faster Display and Easier Storage to learn how to compress PDFs by up to 95%,
slashing space requirements and accelerating transmission and display!
Sponsored by Accusoft
Post a comment
Email Article
Print Article
Share Articles
Reddit
Facebook
Twitter
del.icio.us
Digg
Slashdot
DZone
StumbleUpon
FriendFeed
Furl
Newsvine
Google
LinkedIn
MySpace
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
2 dari 9 6/13/2014 8:08 AM
Technorati
Windows Live
YahooBuzz
Print a Web Page Using JavaScript
By Joe Burns
Tweet
12
89
Suka Suka
with updates by HTMLGoodies Editorial Staff
You've probably been on a web page and wanted to print out the page for later reference. Wouldn't it be great to
be able to provide visitors to your site to be able to do just that? This tutorial for web developers will show you
how to use JavaScript's window.print function, complete with examples!
The JavaScript window.print() Function
Print is a method of the object "window." At first I thought that the command was simply capturing the buttons
along the top of the browser window so all I had to do was substitute "print" with one of the other items, like
"mail" or "home". No dice. I also tried setting up the same type of format with items found in the menus like
"properties" and "Options." Error after error. It's apparently put into the DTD as a method unto itself.
Saving Grace!
The good thing about the command, the way the authors set it up, is that it does not immediately fire a print. It
actually only fires the print window, which still gives your site's visitors a choice in the matter!
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
3 dari 9 6/13/2014 8:08 AM
It's then up to the person who triggered the method whether to then continue with the printing or not. That's good
because I can see a ton of problems with printers not being turned on and huge, huge files being set to print.
So, how to you set up the code? Well, try this first and then look at the code:
Click to Print This Page
And here's the code:
<A HREF="javascript:window.print()">Click to Print This Page</A>
The JavaScript is triggered by using the command "javascript:" in place of a URL, thus allowing a hypertext link
to fire off the JavaScript.
And before you ask, yep, this will work with almost any JavaScript Event Handler as long as the format allows
you to write it as a specific line or trigger a function.
You can set it to print off of an image:
<A HREF="javascript:window.print()">
<IMG SRC="print_image.gif" BORDER="0"</A>
It looks like this as an image:
And yes, you can set it to trigger off a button:
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
4 dari 9 6/13/2014 8:08 AM
It looks like this as a form button:
To make sure that your visitors have JavaScript enabled before you provide them with a button that only works
using JavaScript, you can use JavaScript to print out the button. That way if they have it disabled, no button
appears, saving them the frustration of clicking a button that does absolutely nothing:
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
Some Printing Suggestions
Okay, now you have the power to force a print request, but that doesn't mean to simply offer a print on any page.
You should make a point of being helpful to your users.
Make a Page for Printing - The Goodies tutorials, as you can see, have a wavy background, a bunch of
images, and stuff stuck in all over the place. They're not very good for printing. If I was to offer this page
for printing, I would make a point of creating basically a text-only page, or at least a page with limited
images and no background.
Make the Page Printer-Friendly - I would lose all text colors and make sure the width of the page was no
more than 500px, left justified, so that what was shown on the screen would print on the printed page in
the same way.
Allow the User to Choose to Print - My print offering would be text at the bottom or an icon that doesn't
intrude. Everyone knows they can already print your pages without any help from your coding. So, make
this something you offer as a help rather than putting it into people's faces.
Never Attach This to a User Event - Don't set this to an onLoad, or an onMouseOver, or some other user
event. It will only tend to upset those who have visited your page and probably stop them from coming
back.
Additionally, there are more detailed methods of printing pages that allow you to separate the content from the
ads, site navigation, etc. This is easier if your content is separate from your site's design, i.e. in a database. We'll
go into those techniques in a later tutorial!
That's That...
There you go. Now you can set up a print request through JavaScript. If used correctly, this is a very nice
addition to a page and a help to the user, so use it wisely and well.
Enjoy!
Test the Code
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
5 dari 9 6/13/2014 8:08 AM
Make a Comment
mehdisaid on March 9, 2014 at 9:21 pm
Hi, I want to print "paper setup" and "How Many Copy". Please Help me.
Reply
Jeffreysaid on December 31, 2013 at 3:36 am
I am using an "else if" statement to print repeated information. My information is over flowing to next
page and cutting some letters in half between pages. How do I get print to stop when full on one page and
start fresh on a new page.
Reply
Finetunersaid on December 9, 2013 at 9:13 pm
Awesome. Just a line of code! It permits to print a hard copy and make a PDF too, depending on whether a
printer and PDF driver are installed.
Reply
Pichay pumpanyasaid on October 22, 2013 at 11:05 am
Printscreen
Reply
Bobsaid on October 14, 2013 at 1:33 pm
I want to add a print button to allow the person viewing my site to print out a document. What is the code
to complete such a task? Thanks, Bob
Reply
Stefan Wittwersaid on October 14, 2013 at 3:48 am
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
6 dari 9 6/13/2014 8:08 AM
It works. Thanks you very much!
Reply
sachin naharsaid on August 12, 2013 at 10:33 pm
how to print that page in pdf formate
Reply
angelica galvezsaid on August 4, 2013 at 12:40 am
very nice..perfect one..now i have source for printing...7 weeks to go ..is our defense in our thesis my final
step. thanks 4 this....
Reply
Veereshsaid on April 5, 2013 at 3:32 am
While Taking the print out i want to hide the date and url .. Please any one can help
Reply
Ihsansaid on April 23, 2013 at 12:40 am
As far as I know the URL and date come from the browser. You can disable this easily by switching
to the 'Options' tab on the print window. Print window, as in once you clicked the print button.
There you should be able to set the header and footer to blank (--blank--) each.
Reply
kevinsaid on March 17, 2013 at 2:15 am
thanks a lot for this little tutorial ... helped me a lot
Reply
aisp.tksaid on March 6, 2013 at 7:21 am
thanks for a little tuto....... i realy love it.
Reply
Kevin Johnsonsaid on February 17, 2013 at 1:38 pm
For those asking about modifying the page before printing, you should use CSS print stylesheets. That
way it will print the same way with the builtin print button and your custom made print button.
Reply
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
7 dari 9 6/13/2014 8:08 AM
Absar Akramsaid on January 26, 2013 at 6:37 am
I am using the same code but need a little modification. I want to exclude the "print" button from printing.
I doesn't look any good to see the "print" button on the printed document. Good Day Absar Akram
Reply
Arun Benchaminsaid on July 15, 2013 at 11:07 am
If you want to hide something,you can use javascript with CSS eg: for hiding print button, <input
type="button" id="p2" value="Print this page"> and use the id to hide your button on print event eg:
function printpage() { document.getElementById("p2").style.display="none"; window.print() }
Reply
Absar Akramsaid on February 25, 2014 at 4:30 pm
Hi, nice suggestion but this way button will hide itself after first click and won't let user click
for second time. let say a printer problem occurs for first time? A better solution will be to use
css specific to print media, something like @media print { .printButton { display: none; } }
Reply
Belmond Joe Candelariasaid on January 20, 2013 at 12:01 pm
The code doesn't work properly....It automatically opens OneNote
Reply
mr_xsaid on March 6, 2013 at 7:23 pm
bro,u should check your print setting.change the printer
Reply
Guysaid on January 31, 2013 at 2:44 pm
That's because OneNote is either your default printer, or the printer you have set up to handle print
requests. Make sure the proper printer is installed on your machine (maybe set it to default) and try
the code again.
Reply
htet paingsaid on October 10, 2012 at 8:06 pm
good work.. well done.. Thank you guys...
Reply
Read More Comments...
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
8 dari 9 6/13/2014 8:08 AM
Web Development Newsletter Signup
Invalid email
You have successfuly registered to our newsletter.

Related Articles
So You Want To Open A Window, Huh?
Hovering HTML Windows and Animated Hovering Using JavaScript
Creating a Modular JavaScript Toolbox
Using Multiple JavaScript Onload Functions
Property of Quinstreet Enterprise.
Terms of Service | Licensing & Reprints | About Us | Privacy Policy | Advertise
Copyright 2014 QuinStreet Inc. All Rights Reserved.
Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121
9 dari 9 6/13/2014 8:08 AM