Aug 14

Print Button in iWebiWeb Tip #24  is on how to add a print page button in iWeb.  There are times when you create a page on your website that viewers might want or need to print frequently, so this tip will help you add an easy “Print Page” button to your site.  This tip makes it quick and easy!  Simply paste the code below in an html snippet and that’s it! So here we go:

You can see a demo of both Print page button as a form button and a graphic button in action created in iWeb by clicking the button below:

View Demo »

There are two versions of the code below.  One is to use your own button, the other is to use a form button.  We’ll first start with a form button.

Print Page Form Button

The print page form button doesn’t require any extra graphics or anything, simply paste the code below in an HTML Snippet in iWeb and you’ll have a print page button.  It’s as simple as that!  Here’s the code:

<script Language="Javascript">

function printit(){

if (parent.window.print) {

parent.window.print() ;

} else {

var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>';

document.body.insertAdjacentHTML('beforeEnd', WebBrowser);

WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = "";

}

}

</script>

<SCRIPT Language="Javascript">

var NS = (navigator.appName == "Netscape");

var VERSION = parseInt(navigator.appVersion);

if (VERSION > 3) {

document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>');

}

</script>


Print Page Button with your own Graphic

This one does the same thing but lets you use your own graphic for the print button.  Much better if you’re trying to match a similar style to your custom iWeb design.  It just takes a few steps:

1) First make a graphic in photoshop or whatever else to be your print button and upload it to your server (i.e. MobileMe, Your Host Server, etc).

2) Paste the code below, but replace the code in red with the URL link to your image.

<a href="javascript:parent.window.print()"><IMG SRC="https://www.mysite.com/imagefolder/mybtnimage.png"; width="127" height="31" alt="Print this page" border="0"></a>

3) Hit apply and presto!

If you don’t know how to make a button here are some free print buttons you can use for your own sites.

Download Print Buttons

Or you can find some great print icons by going here: https://findicons.com/search/print

That should be it.  If you have any questions or comments post them below.

[iWeb-Code=’tweet’]

20 Responses to “iWeb Tip #24 – Print Page Button”

  1. Ralf Schuett says:

    Thanks a lot for your very helpful site!

    Greetings from Hamburg, Deutschland (Germany)

  2. Ismael sanchez says:

    Thanks a lot for your very helpful site and your patience!

    saludos desde mexico brother!

  3. Tarek Ahmed says:

    Dear iWebUnlimited

    Please i have 2 questions

    1- did u design all this site using iweb ?

    2- my website is very small , very very small , i designed it using ur tutorials of iweb , but it is very heavy and slow in loading , do u have a solution for this ?

    please see my homepage http://www.tarekpodcast.com

    i’ll really appreciate it

    thank you
    Tarek

    • iWebUnlimited says:

      Tarek, wrong place for those questions silly, this is the Print Tip page, only comments about the print page go here. Post your questions outside of the print tip on the forum. Thanks for visiting, happy to help, just post on the forum instead ;-)

  4. Dear iWebUnlimited, I have used the snippet code for “Print this Page” and it works fine for me both on my Mac with Safari and on my PC with ie. However, others that have called the site from their pc’s cannot get the “Print this Page” to work. They can print using the browser’s print command but not using the button on my site. Any ideas would be appreciated. Your site is a great help. Thanks, Phil

  5. Megan says:

    Thanks for the helpful tips. New to this and having trouble with this one in particular.

    1. Where do I upload the graphic in the server?
    2. What URL link to the image am I pasting into the code? And where am I pasting your given code?

    Not sure why I’m so confused by this one! Thanks for the help.

  6. Andrea says:

    Hy,
    thank you for usefull tips; I have a question. I have a page with an iFrame and inside the iframe a scrollable page. So if I put the print button on that page it will print only the visible part of the iFrame. I want to print all the page inside the iFrame but before activate the print action I want to loading the page inside the iFrame. So I ask you a code that load one page and immediatly after and automatically activate the print dialog box. Basically I tried to use something like this but I don’t know html javascript and more lenguages.
    Thanks for help. My website is: http://dl.dropbox.com/u/1166330/web/at/home.html, if you click on curriculum you will see an iFrame page. Than click on the print image and all the curriculum will be loaded in a single page. At this point I want the dialog box for printing will appear automatically…

  7. Chris says:

    I was curious if you could link this button to a separate sheet, so instead of printing the actual page being viewed. If I had a pdf or jpg stored and had the print button print it instead. I am an industrial designer and would love people to be able to print out “what they see” but have it be in a slightly better set up tear sheet. Any suggestions would be helpful.

    Best Regards,

    Chris

    • Lee says:

      Chris,

      just wondered if you had any luck with this question? I am trying to get my print button to just print the text and not the backgrounds, but even better would be a seperate PDF as you suggested. any help you could give would be apprieciated.

      Thanks

      Lee

  8. Rebekah says:

    Thanks for the great tip! Really appreciate it!

  9. Anson says:

    Thanks so much for this tutorial, I really needed it! You’re website is awesome, keep it up!

  10. Lee says:

    This is great thanks, but i wonder if there is an addition to the code to print everything on the page but ignoring the background, so essentially printing all the content but on a white background instead of the web page background?

    Thanks

    Lee

  11. Andi says:

    That’s absolutely great! Thanks for providing us with cool stuff!

    Just one question toi the Print-Button:
    Is it possible to define the color, in which text will be printed?
    My site has a black background and white text. If I use your print-code, the page will be printed, but the text is white so I don’t see anything. It would be great, if I could change it so that the white text will be printed in black.

    Thanks a lot
    Andi

  12. jake says:

    you have the best website ever and it looks really nice

  13. i love iweb, and are updating my site as we speak. Why oh why can iweb not become an open source software, for genious like you guys to develop on…

  14. Missing answers to a lot of questions in here – print without background/print a pdf …

  15. Ana says:

    Hello, i have 2 questions about the snippet.
    Can i somewhere say what it should not print? – i have some h1, h2 words hidden in background that get print…i dont want that

    or is it possible to print with background?

    That would be cool…

    Thenx

    Wbw

Leave a Reply