Viewing Article

| May 27 2011, 3:59 PM | Print

Print Button

use the “print()” javascript method to send the webpage to the printer.

 onClick="window.print()"

 value="Print This Page"/>

Some people don’t really like the appearance of a form button, so as an alternative you can simply use a link with the embedded javascript to do the exact same thing.

Print This Page

Another approach people use is to block entire sections of the website using CSS, and assign specific sections of the page to print. You do this by first linking the CSS file in the header section.

type="text/css" media="print" />

Next, you’ll need to create the actual CSS file and save it in the same directory as your webpage. The CSS file should assign all of the sections of the page that should not be printed, and then also make the elements of the page you assign to print as visible.

DIV#header, DIV#newflash, DIV#banner {display: none;}

body {visibility:hidden;}

.print {visibility:visible;}

Now that your CSS file is set up, all you have to do is go through your page and tag each section with the “print” class.

This line will be printed.

This line won't.

Now you can see in the printout where only the sections of the page marked with the “print” class get printed to the page, and all other sections don’t. The one difficulty with this approach is that you have to make sure to turn off the display for all DIV sections that you don’t want printed.

All you have to do is create a PDF formatted version of the webpage content, save it on your web host, and then link the file in the header of the page.

That’s all you have to do! You can embed the print button on your site just like in the examples above, but instead of the CSS file loaded for the print method, the PDF, DOC or other file is sent to the printer

Viewing Article

Log In

Search