Bombolom.com : /webdev/StartPagePrintAutomatic-2007-12-17-20-35.html

`(webdev)` Print a page automatically

Posted by José Lopes.

This post shows how to create a HTML page that automatically opens the print box and waits to be printed.

Lets imagine that you have a page of your site with some information that is frequently printed and, to have a more professional layout, you want to have different printable version.

The best way to do it, as I see it, is to create a HTML version of the page that we will call printable version and place a link (for instance represented by a print image) on the original page.

From my personal experience I can say that the users will use the a "print" link instead of other options, like a PDF version of that information that can be saved and printed without problems. It may appear strange but its true.

So, on the printable version we only place the information we like to be printed, removing for instance the menu of the site, including a nice header with the site name, using a dedicated CSS, etc.

To make it open automatically the print dialog we must include the following code on the printable version:

<head>
<script type="text/javascript">
  function printpage() {
  window.print();
  }
</script>
</head>
<body onload="printpage()">

You can see that between the <head></head> tags we place a javascript function that, once executed, calls the print of the current page. Of course that more things can be placed on the head, this example is just that.

The final magic is done inside the body tag that executes once the page is loaded the javascript function we just created.

To see this code in action click here.

The print result depends on the browser being used. From my tests the IE generates the worse output.

2007.12.17 | There's more... | Comments 0 | Tags html, javascript, print

(webdev) Print a page automatically

`(webdev)` Print a page automatically