Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

Introduction home about non-technical introduction newsletter archive HTML 5 html5 development center 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 java applets javascript

1 of 9

10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

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 Best Practices for Developing a Web Site: Checklists, Tips, Strategies & More. Download Exclusive eBook Now. Best Practices for Developing a Web Site: Checklists, Tips, Strategies & More. Download Exclusive eBook Now. 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 Technorati Windows Live YahooBuzz

Print a Web Page Using JavaScript

2 of 9 10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

By Joe Burns

Tweet

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!

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:
3 of 9 10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

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>

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.

4 of 9

10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

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

Make a Comment

Senukasaid on February 3, 2012 at 8:54 am

Thanks for sharing. Nice day! Reply

Roedy Greensaid on November 18, 2011 at 2:12 am

I am looking for a way to print just the form, not the whole web document. I would like to use it to print out a customised cheat sheet for Wireshark. See http://mindprod.com/jgloss/wireshark.html I want it to print on the client computer, not the server thousands of miles away. Reply

the_dentistsaid on January 26, 2012 at 3:47 am

exactly what i wanted to say. . .only i want to print a div. . .but the principle is the same. . .Roedy, we are great programmers. . .we ask the right questions :D

5 of 9

10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

Reply

Aaronsaid on January 30, 2012 at 5:27 pm

You should see http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only it eliminates the stuff you don't want to print. Reply

schectersaid on November 16, 2011 at 12:19 am

is it possible to print the background image ? Reply

Jamessaid on October 12, 2011 at 9:49 pm

It seems to me that all you really need to do is give the user a link that generates a printer friendly page so the user can use the browser's print feature. Reply

rose_of_sharynsaid on October 6, 2011 at 9:51 am

thanks for this! it really helped me :)) Reply

mangsuwu@gmail.comsaid on September 24, 2011 at 9:28 am

nice bro... thanks Reply

-said on September 13, 2011 at 6:15 pm

How do I make a link to print A DIFFERENT WEBPAGE? For example, want to make link to "click to print handout". Thank you! Reply

Nirsaid on September 26, 2011 at 1:26 am

Hi, Im hoping I'm understanding your question correctly. Do you want to open a window for a " print preview"? var popUpWindow; popUpWindow.open(do your thing here); popUpWindow.print(); popUpWindow.close(); //if you want to close after the user responds to the dialog Reply

Imransaid on August 25, 2011 at 3:41 am

6 of 9

10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

Really nice Reply

Ayomidesaid on August 22, 2011 at 8:06 am

This page is very useful, especially for us up and coming programmers Reply

Kingsaid on June 21, 2011 at 5:26 am

i have a question.. does it print sets of data that came from database? Reply

stonesaid on August 15, 2011 at 10:27 am

It will print whatever is rendered on the page, by the time a page arrives at your browser where that data came from doesn't matter. Reply

mohammadsaid on June 7, 2011 at 7:11 am

how i can print the page not screen page , for example: i like when window show in the screen page1 , in page1 have print version button , when clicking print the page2 , i like the users dont see the page2, but printing page2 tnks Reply

Juergensaid on June 1, 2011 at 5:36 am

the print works fine but I don't want to print "Page 1 of 1" which shows up automatically as the first line, nor do I want to print the link, i.e. "http://localshost/DE723/printCert1/doit.php" which prints automatically as the last line on the page together with the date. How do I disable this? Reply

sjbsaid on March 14, 2011 at 6:21 am

I use this same code to print my page that contains a table of search results. If the table runs past 1 page in length, it doesn't print any more. All I'm able to print is the first page of the table. Any suggestions or limitations to this code? Reply

Becsaid on April 19, 2011 at 3:57 am

As with sjb, how do you set it up to print more than just the first page? I'm trying to print this: http://www.parentpacks.com.au/essential-checklist/view-all-products.html

7 of 9

10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

Reply

Simcosaid on February 21, 2011 at 2:45 pm

Hopefully you can help with this, we are using a PDF generator plugin with Wordpress. What we want is when the visitor clicks the Generate PDF Of This Page/Article that it generates the PDF in a new window and the print dialog box automatically opens. I understand the 'click here to print this page' but in this case we don't want that, we want to 'click here to generate pdf' and the printer dialog box opens once the PDF is generated and displayed. Any ideas on this? Thanks in advance! Reply

Quicksilversaid on May 2, 2011 at 7:04 pm

I'm actually trying to do the same thing. window.print() doesn't work for pdf's from my experience. Reply

sreejusaid on February 18, 2011 at 9:11 pm

thanks........... Reply Read More Comments... Web Development Newsletter Signup

Invalid email You have successfuly registered to our newsletter.

8 of 9

10-02-2012 19:03

Print a Web Page Using JavaScript

http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Print...

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

Copyright 2012 QuinStreet Inc. All Rights Reserved. Terms of Service | Licensing & Permissions | Privacy Policy About the Developer.com Network | Advertise

9 of 9

10-02-2012 19:03