Adding Print buttons and different print settings to your web page

Posted by Libby Fisher on Tuesday, August 17th, 2010 in Useful Scripts and Codes, Web Design

Here are several different ways that you can use to add a Print button and different print settings to your web pages.

To insert a basic Print button, simply copy and paste this code to create the button where you wish the button to appear on your page:

<form>
<input onclick="window.print();return false;" type="button" value="Print" />
</form>

The print button will look like this:

If you want to insert a text link instead of a button, simply use this code:

<a href="#" onclick="window.print();return false;">PRINT</a>

Your link will look like this: PRINT

You can also use Javascript to create the print button, using this script:

<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form> '
+ '<input type=button name=print value="Click" '
+ 'onClick="javascript:window.print()"> To Print this page!</form>');
}
// End -->
</script>

The button will look like this:

If you don’t want the Print button itself to print when the web page is printed, use these Javascript codes. First, insert this part into the section of your website:

<script language="JavaScript">
function printPage() {
if(document.all) {
document.all.divButtons.style.visibility = 'hidden';
window.print();
document.all.divButtons.style.visibility = 'visible';
} else {
document.getElementById('divButtons').style.visibility = 'hidden';
window.print();
document.getElementById('divButtons').style.visibility = 'visible';
}
}
</script>

And then add the button in your webpage using this code:

<div id="divButtons" name="divButtons">
<input type="button" value = "Print this page" onclick="printPage()" style="font:bold 11px verdana;color:#FF0000;background-color:#FFFFFF;">
</div>

If you want to be able to print just one section or frame of your page, insert this code into the frame or section to be printed to create the button:

<INPUT TYPE =button name="cmdPrint" VALUE="Print"
onClick="parent.mainFrame.print()">

Change the name “mainFrame” to the name of the section or frame you wish to be printed when the button is clicked.

Another way to control which parts of the page print out is to add a separate stylesheet that will be used for printing. (You can read more about print stylesheets here.) Add this to the section of your page:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Now create a print.css file in your favorite text editor which contains the following:

body {visibility:hidden;}
.print {visibility:visible;}

Upload the print.css file to your server. Now all you need to do is to assign “class=print” to whichever parts of your web page that you want to have print out when the page is printed. Anything on the page not assigned to this class will not print.

Have questions or comments? Let me know!

1
Shares

2 Comments

  1. George says:

    Hello . I am using this post, on sharepoint list. What do you mea by “assign “class=print” to the parts”. can you explain me the proccedure?

    • Libby Fisher says:

      Hi George,

      That means that if there are only certain parts of your web page that you want to print when people print the page – for example: a div called “sidebar” – you would add the class “print” to that div. So, this code:

      < div id="sidebar" >

      would become:

      < div id="sidebar" class="print" >

      Hope that helps!

  2. Leave a response

    Current ye@r *