Click here to Skip to main content
15,867,594 members
Articles / Web Development / HTML
Article

using javascript create printer-friendly pages.

Rate me:
Please Sign up or sign in to vote.
3.58/5 (18 votes)
20 Oct 20052 min read 202K   2.5K   35   19
using javascript create printer-friendly pages,Writing the content directly into the popup windows. Using this script the pop up window can be created which holds the data that has to be printed.

Sample screenshot

Introduction

create printer-friendly pages,Writing the content directly into the popup windows.

Using this script the pop up window can be created which holds the data that has to be printed.


 It generates a new page using only content defined between div elements.

 <div class="style3" id="print_content">   </div>

Everything else is ignored.

 

The new page is called with following scripts


<a href="javascript:PrintThisPage()">Cick here to print</a>

With JavaScript we can specify  properties of the window such as width, height, presence or absence of scrollbars, location bar, stauts bar etc.


Properties like

<P>toolbar=0|1   Specifies whether to display the toolbar in the new window.  
<P>location=0|1   Specifies whether to display the address line in the new window.  
<P>directories=0|1 Specifies whether to display the Netscape directory buttons.  
<P>status=0|1   Specifies whether to display the browser status bar.  
<P>menubar=0|1   Specifies whether to display the browser menu bar.  
<P>scrollbars=0|1  Specifies whether the new window should have scrollbars.  
<P>resizable=0|1   Specifies whether the new window is resizable.  
<P>width=pixels   Specifies the width of the new window.  
<P>height=pixels   Specifies the height of the new window.  
<P>top=pixels   Specifies the Y coordinate of the top left corner of the new window. (Not   supported in version 3 browsers.)  
<P>left=pixels   Specifies the X coordinate of the top left corner of the new window. (Not   supported in version 3 browsers.)  </P>


 </P>
<P><CODE>var  disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";<BR>
 disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; <BR>

 

Using  innerhtml property to READ the content  between the DIV and /DIV tags.

var content_vlue = document.getElementById("print_content").innerHTML;


The window.open() method opens a new browser window

we must create a new window and store a reference to it in a variable

var docprint=window.open("","",disp_setting); <BR>

every window contains a document. We use  docprint.document.write method to write the content to newwindow.
 

 

onLoad attribute inside BODY element executes (javascript onLoad="self.print() )
function and disply the print screen.

docprint.document.write('</head><body onLoad="self.print()"><center>');

docprint.document.close(); <BR><BR>at the end is something different than a window.close(), it kind of means that the document inside the popup is closed for writing.we must close the document ourselves. If we didn't close the document, the computer would still be waiting for more HTML, and indeed would parse the next input as HTML, which would generally produce an error.
<CODE><BR>docprint.focus(); 

It means the focus is on the new pop up window .

 

Complete  Source Code:
======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</A>">
<html xmlns="<A href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</A>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clinet side printer version</title>
<style type="text/css">
<!--
.style1 {color: #0033FF}
.style3 {
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head> 
<script language="javascript">
function Clickheretoprint()
{ 
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
      disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 
  var content_vlue = document.getElementById("print_content").innerHTML; 
  
  var docprint=window.open("","",disp_setting); 
   docprint.document.open(); 
   docprint.document.write('<html><head><title>Inel Power System</title>'); 
   docprint.document.write('</head><body onLoad="self.print()"><center>');          
   docprint.document.write(content_vlue);          
   docprint.document.write('</center></body></html>'); 
   docprint.document.close(); 
   docprint.focus(); 
}
</script>
<body bgcolor="#CCCCCC">
<table width="80%" border="0" align="center" cellpadding="4" cellspacing="4" bgcolor="#FFFFFF">
  <tr>
    <td colspan="2" bgcolor="#CCCCFF"><h2 align="center" class="style1">Site Header Name </h2></td>
  </tr>
  <tr>
    <td width="16%" valign="top" bgcolor="#CCCCFF"> <table width="62%" border="0" align="center" cellpadding="0" 
cellspacing="0">
      <tr>
        <td><a href="#">Link1</a></td>
      </tr>
      <tr>
        <td><a href="#">Link2</a></td>
      </tr>
      <tr>
        <td><a href="#">Link3</a></td>
      </tr>
    </table></td>
    <td width="84%">
    <div align="right"><a href="javascript:Clickheretoprint()"> Click here to print</a>    </div>
    <div class="style3" id="print_content">Content for  id "print_content" Goes Here
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print content Print content Print content Print content Print content Print content 
Print content Print content Print content Print<br />
            <br /> 
            content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content Print content Print 
content Print content Print content Print content Print content Print content Print content Print content </td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#CCCCFF"><span class="style3">footer</span></td>
  </tr>
</table>
</body>
</html>

 

 

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
United States United States
Rich development experience in Internet/Intranet based applications using Dot net C# , ASPX , ASP, MS SQL Server,AJAX, JavaScript,HTML,XML,CSS.

Comments and Discussions

 
Questionprint in two columns Pin
roseannne1414-Dec-12 19:34
roseannne1414-Dec-12 19:34 
Questioncan not print webcontrol values in an webpage Pin
goutamendu27-Jun-12 3:53
goutamendu27-Jun-12 3:53 
QuestionNot Printing in IE or FF Pin
Tim Knoop26-Mar-12 9:31
Tim Knoop26-Mar-12 9:31 
AnswerRe: Not Printing in IE or FF Pin
newbegin9-Jul-12 7:57
professionalnewbegin9-Jul-12 7:57 
QuestionDoesn't work in other browsers Pin
Mojgan Nemati7-Jul-11 7:14
Mojgan Nemati7-Jul-11 7:14 
AnswerRe: Doesn't work in other browsers Pin
newbegin25-Jul-11 12:00
professionalnewbegin25-Jul-11 12:00 
GeneralSelective printing Pin
Chris Drew16-Apr-09 7:10
Chris Drew16-Apr-09 7:10 
QuestionHow to avoid header and footer at the time of printing Pin
deepthy.p.m7-Aug-08 0:56
deepthy.p.m7-Aug-08 0:56 
AnswerRe: How to avoid header and footer at the time of printing Pin
newbegin20-Aug-08 3:24
professionalnewbegin20-Aug-08 3:24 
GeneralNice and Easy Pin
Dhirendra Singh Jadon15-Oct-07 18:23
Dhirendra Singh Jadon15-Oct-07 18:23 
GeneralNice one Pin
SiskoTako17-Apr-07 13:42
SiskoTako17-Apr-07 13:42 
Questionprint page number?? Pin
siin21-Mar-07 15:56
siin21-Mar-07 15:56 
QuestionHow to hide the page header and footer Pin
Harold Espinosa Ch30-Oct-06 13:16
Harold Espinosa Ch30-Oct-06 13:16 
GeneralThanks Pin
bcfusework16-Oct-06 5:08
bcfusework16-Oct-06 5:08 
Generalprint pop up does not come in this case Pin
idreesbadshah20-Sep-06 7:17
idreesbadshah20-Sep-06 7:17 
Generalan issue!! Pin
Sanjo19839-Jun-06 1:10
Sanjo19839-Jun-06 1:10 
GeneralRe: an issue!! Pin
newbegin2-Oct-06 3:59
professionalnewbegin2-Oct-06 3:59 
Generalcss?.. Pin
kan.izh24-Oct-05 23:43
kan.izh24-Oct-05 23:43 
GeneralRe: css?.. Pin
volkan.ozcelik26-Oct-05 13:41
volkan.ozcelik26-Oct-05 13:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.