Print a Web Page Using JavaScript     http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin...         Int...
Print a Web Page Using JavaScript                                 http://www.htmlgoodies.com/beyond/javascript/article.php...
Print a Web Page Using JavaScript                                    http://www.htmlgoodies.com/beyond/javascript/article....
Print a Web Page Using JavaScript                                           http://www.htmlgoodies.com/beyond/javascript/a...
Print a Web Page Using JavaScript                                      http://www.htmlgoodies.com/beyond/javascript/articl...
Print a Web Page Using JavaScript                                   http://www.htmlgoodies.com/beyond/javascript/article.p...
Print a Web Page Using JavaScript                                      http://www.htmlgoodies.com/beyond/javascript/articl...
Print a Web Page Using JavaScript                                    http://www.htmlgoodies.com/beyond/javascript/article....
Print a Web Page Using JavaScript                                      http://www.htmlgoodies.com/beyond/javascript/articl...
Upcoming SlideShare
Loading in …5
×

Print a web page using java script

1,963 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,963
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Print a web page using java script

  1. 1. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... 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 scripting1 of 9 5/5/2012 8:14 AM
  2. 2. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... dhtml/layers dot net 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 Looking to reduce IT costs? Learn how to cut expenses without cutting services, plus tactical approaches to controlling costs and cutting power expenses outside of the data center. Download now. Increase Your Microsoft Office 365 Knowledge! Dig inside this suite of cloud-based collaboration tools. Watch the Video>> Sponsored Post a comment Email Article Print Article Share Articles Reddit Facebook Twitter del.icio.us Digg Slashdot DZone StumbleUpon FriendFeed Furl Newsvine2 of 9 5/5/2012 8:14 AM
  3. 3. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... Google LinkedIn MySpace Technorati Windows Live YahooBuzz Print a Web Page Using JavaScript By Joe Burns 6 Tweet 74 Like with updates by HTMLGoodies Editorial Staff Youve probably been on a web page and wanted to print out the page for later reference. Wouldnt 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 JavaScripts 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. Its 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 sites visitors a choice in the matter!3 of 9 5/5/2012 8:14 AM
  4. 4. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... Its then up to the person who triggered the method whether to then continue with the printing or not. Thats 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 heres 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>4 of 9 5/5/2012 8:14 AM
  5. 5. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... 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 doesnt 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. Theyre 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 doesnt 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 peoples faces. Never Attach This to a User Event - Dont 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 sites design, i.e. in a database. Well go into those techniques in a later tutorial! Thats 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 Code5 of 9 5/5/2012 8:14 AM
  6. 6. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... Make a Comment Theosaid on April 17, 2012 at 10:55 am Can i use the same script for printing just a section of a web page? If not, what is required? Thanks Reply Venus LUKsaid on March 26, 2012 at 10:55 pm my website, which is designed with a title banner, left menu and the content is on the right hand side. The point is when i scroll down the content, the left menu and title banner is remain site when scrolling down the vertical bar. As I need to add an action for printing, however, it cannot print the full set of the web pages, it only show the content but not the title banner and left menu bar, any solution to fix? Thank you for your assistance. Thank you very much! Venus Reply InterDessaid on March 13, 2012 at 1:16 am Print a Web Page Using JavaScript http://jqdev.blogspot.in/2012/02/print-web-page-using-javascript.html Reply Mr Kangsaid on February 22, 2012 at 8:24 pm Why window.print() cannot run in IE 6? please help me run print on IE6! Reply hannah@communicationscouncil.org.ausaid on February 20, 2012 at 4:07 pm THANK YOU WORKS SO WELL!!! Reply Senukasaid on February 3, 2012 at 8:54 am Thanks for sharing. Nice day!6 of 9 5/5/2012 8:14 AM
  7. 7. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... 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 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 dont 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 browsers 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 Reply7 of 9 5/5/2012 8:14 AM
  8. 8. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... -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 Im 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 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 doesnt matter. Reply Read More Comments... Web Development Newsletter Signup Invalid email You have successfuly registered to our newsletter.8 of 9 5/5/2012 8:14 AM
  9. 9. Print a Web Page Using JavaScript http://www.htmlgoodies.com/beyond/javascript/article.php/3471121/Prin... Canon Printer View & Compare Canon Printer Made with the latest Technology! www.canon.co.id ECM output Print, email or fax content from popular ECM platforms www.riptideserver.com/ JavaScript Developer Tool Build business web applications with nothing but JS. Free Download. www.wakanda.org NovaCentrix Conductive inks and advanced curing Dry, sinter, & anneal at high speed www.novacentrix.com 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 | Advertise9 of 9 5/5/2012 8:14 AM

×