The JavaScript Source: Miscellaneous : Print to Preview

General

Your visitors may not be familiar with style sheets for printing and don't see a 'print preview' in their browser. This script will provide them with a reliable print preview.

View the demo page

Notes

Created by: Pete McVicar
Web Site: http://www.alistapart.com/articles/printtopreview
Posted: November 13, 2006

To read the entire article, visit A List Apart

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: print-preview.css

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent( function(){ add_print_link( 'nav' ) } );

function add_print_link( id ){
  if( !document.getElementById ||
      !document.getElementById( id ) ) return;

  // add extra functions to page tools list
  var print_page = document.getElementById( id );

  // create print link
  var print_function = document.createElement('p');
  print_function.className = 'print-link';
  print_function.onclick = function(){ print_preview(); return false; };
  print_function.appendChild( document.createTextNode( 'Print the Page' ) );

}

function print_preview() {
	// Switch the stylesheet
	setActiveStyleSheet('Print Preview');
	
	// Create preview message
	add_preview_message();

	// Print the page
	window.print();
}

function add_preview_message(){
var main_content = document.getElementById('content');
var main_body = main_content.parentNode;

	if (document.getElementById){
		
		var preview_message = document.createElement('div');
		preview_message.id = 'preview-message';
	
		// Create Heading
		var preview_header = document.createElement('h3');
		var preview_header_text = document.createTextNode('This is a print preview of this page');
		preview_header.appendChild(preview_header_text);
		
		// Create paragraph
		var preview_para = document.createElement('p');
		var preview_para_text = document.createTextNode('Without this message of course. ');
		
		var cancel_function_link = document.createElement('a');
			cancel_function_link.onclick = function(){ cancel_print_preview(); return false; };
			cancel_function_link.setAttribute('href', '#');	
		var cancel_function_link_text = document.createTextNode('Return to the existing page.');
		cancel_function_link.appendChild(cancel_function_link_text);
		preview_para.appendChild(preview_para_text); //
		preview_para.appendChild(cancel_function_link);
		
		// Put it all toegether
		preview_message.appendChild(preview_header); 
		preview_message.appendChild(preview_para);
		main_body.insertBefore(preview_message, main_content);

	}
}

function cancel_print_preview() {
	// Destroy the preview message
	var print_preview = document.getElementById('preview-message');
	var main_body = print_preview.parentNode;
	main_body.removeChild(print_preview);
	
	// Switch back stylesheet
	setActiveStyleSheet('default');
}

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

/* import existing print stylesheet */
@import "print.css";

/* set styles for the preview message */
#preview-message {
	display:block;
	border:1px solid #666;
	background:#FF6;
	padding:2px 5px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="print-preview.css"></script>

Body

Paste this code into the BODY section of your HTML document


<a href="#" onclick="print_preview(); return false;">Print this page</a>

User Comments

Add a comment, suggestion, or correction

Comments feed

next comments...

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

12. From: D.Kiruthiga
12/04/2008 22:34:27

10. From: DITCH
THE # CREATES NOTHING to link
10/12/2007 10:15:13

11. From: Lee (Admin)
11/07/2007 15:36:02

8. From: Joel Rosado
Print to Preview
08/20/2007 23:28:23

9. From: Lee (Admin)
10/03/2007 14:39:12

7. From: Jodh
Still shows yellow box that is not supposed to be there
05/17/2007 13:25:10

6. From: Josh
How to specify what gets printed
05/17/2007 13:01:12

3. From: malcolm
05/07/2007 09:40:44

4. From: Lee (Admin)
05/10/2007 15:15:56

2. From: hakkie
11/25/2006 14:31:57

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

12. From: D.Kiruthiga12/04/2008 22:34:27

10. From: DITCHTHE # CREATES NOTHING to link10/12/2007 10:15:13

11. From: Lee (Admin)11/07/2007 15:36:02

8. From: Joel RosadoPrint to Preview08/20/2007 23:28:23

9. From: Lee (Admin)10/03/2007 14:39:12

7. From: JodhStill shows yellow box that is not supposed to be there05/17/2007 13:25:10

6. From: JoshHow to specify what gets printed05/17/2007 13:01:12

3. From: malcolm05/07/2007 09:40:44

4. From: Lee (Admin)05/10/2007 15:15:56

2. From: hakkie11/25/2006 14:31:57

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

12. From: D.Kiruthiga
12/04/2008 22:34:27

10. From: DITCH
THE # CREATES NOTHING to link
10/12/2007 10:15:13

11. From: Lee (Admin)
11/07/2007 15:36:02

8. From: Joel Rosado
Print to Preview
08/20/2007 23:28:23

9. From: Lee (Admin)
10/03/2007 14:39:12

7. From: Jodh
Still shows yellow box that is not supposed to be there
05/17/2007 13:25:10

6. From: Josh
How to specify what gets printed
05/17/2007 13:01:12

3. From: malcolm
05/07/2007 09:40:44

4. From: Lee (Admin)
05/10/2007 15:15:56

2. From: hakkie
11/25/2006 14:31:57