Printer Friendly Version Of Your Web Page Content

Some times we need to put an option in our web page so that user can take a print of the content of the page like ‘Click here to Print’ button.

For printing the content we can use JavaScript so that user can print the content of the page only and the other graphics, page layout will be ignored at the time of printing.
Clinet side printer version

Step1: Put your printable content inside a div as like

<div id="print_content">
  Your Printable content / site text content will be
  placed here.
</div>

Step2: Put the Print link / button in the top of your page like

<a href="javascript:Clickheretoprint()"> Click here to print</a>

Step3: Put the following JavaScript function at the top of your page

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

Everything is done. Now any one can get a print out of the content of your web page.

If you want to download the working copy of this script, click here to download.

Printer Friendly Version Of Your Web Page Content

Leave a Reply