PHP Development: Print preview using javascript

Using javascript we can create printer friendly webpages.We can use window.print function to print a webpage.
The script is as follows.

<a href="javascript:window.print()">Click to Print This Page</a>

When we click on the print button a print dialog window will open and we can either print the page or can cancel the print. Using this method we cant find the preview of the print page. Using the following script we can generate a popup and the popup holds the data that has to be printed. So we can get print preview of the web page.

Step 1 : Create a div area that holds the print content.

example :

<div id="printsection">
<table width="652" border="0">
<tr>
<td width="30" height="24"> </td>
<td width="606"><strong>This is a sample content for printing</strong></td>
</tr>
<tr>
<td height="129"> </td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like.</td>
</tr>
</table>
</div>

here the div 'printsection' holds the print content.

Step 2 : Create a javascript function to open the popup

example :

<script language="javascript">
function printPage(printContent) {
var display_setting="toolbar=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var printpage=window.open("","",display_setting);
printpage.document.open();
printpage.document.write('<html><head><title>Print Page</title></head>');
printpage.document.write('<body onLoad="self.print()" align="center">'+ printContent +'</body></html>');
printpage.document.close();
printpage.focus();
}
</script>

This function generates a window that contain the printing data.
Add the above code the <head> area. Here we can set the display settins like tool bar,menu bar , window height etc.

Step 3 : Call the function from the html page.

Call the above function from the html page.

example :

<a href="javascript:void(0);" onClick="printPage(printsection.innerHTML)">Print Preview</a>

That's all. It will popup a window and the print dialog box.

Full Source Code :

<html>
<head>
<title>Print Preview Sample</title>
<script language="javascript">
function printPage(printContent) {
var display_setting="toolbar=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";

var printpage=window.open("","",display_setting);
printpage.document.open();
printpage.document.write('<html><head><title>Print Page</title></head>');
printpage.document.write('<body onLoad="self.print()" align="center">'+ printContent +'</body></html>');
printpage.document.close();
printpage.focus();
}
</script>
</head>
<body>
<div id="printsection">
<table width="652" border="0">
<tr>
<td width="30" height="24"> </td>
<td width="606"><strong>This is a sample content for printing</strong></td>
</tr>
<tr>
<td height="129"> </td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like.</td>
</tr>
</table>
</div>
<a href="javascript:void(0);" onClick="printPage(printsection.innerHTML)">Print Preview</a>
</body>
</html>

PHP Development

Tuesday, May 12, 2009

Print preview using javascript

5 comments: