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:

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

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:

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

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) { = 'hidden';
window.print(); = 'visible';
} else {
document.getElementById('divButtons').style.visibility = 'hidden';
document.getElementById('divButtons').style.visibility = 'visible';

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;">

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"

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!

  • George

    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

      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!

  • Luis Fernando Álvarez Solís

    Hi, nice post by te way! I just want to ask if there’s a way to swap elements in the print layout. For example, if my site layout has the structure of “header, content and footer” then in the print layout have the structure of “header, footer and content”

    Thanks in advance