As you can see, window.print() method will print everything in your page, including navigation or Print button. Because of that, possible solution is to have two versions of page, one for displaying on screen and second version for printing. Version for printing will not contain buttons or navigation, but only the report formated for printing. In this case, your print button will have HTML code like this:
<input type="button" value="Print" onclick="window.open('YourPrintPage.aspx')" />
Print button on first page only opens a new window and navigate to print version of the page. At the end of YourPrintPage.aspx, you can add javascript code for printing, like this:
<script language="javascript">
window.print();
</script>
window.print();
</script>
This javascript will execute when page loads and you don't need any button on your printing version.
It is not just about hiding navigations, buttons and other unwanted elements. You need to use different metric units. For screen version it is best to use pixels to define size of fonts, tables, images etc., as you probably already do. But, for print version use points instead of pixels. For example:
body {
font: 12pt;
}
font: 12pt;
}
Avoid "printer friendly" version of the same content
It is unnecessary to make another page just for printing. Instead of two versions of the same content, it is often better to solve print format problems with css styles and have only one page for both printing and showing on screen. Take a look at bellow html code snippet, you can place it inside page's <head> tag:
<LINK rel="stylesheet" href="style-for-screen.css" type="text/css" media="screen">
<LINK rel="stylesheet" href="style-for-print.css" type="text/css" media="print">
<LINK rel="stylesheet" href="style-for-print.css" type="text/css" media="print">
As you can see, there is media attribute inside the LINK tag. Web browser will use style-for-screen.css to show page on screen or style-for-print.css when print the page. Now you can simply hide elements like navigation, buttons etc. For example, let say your navigation menu is inside <div> tag with id = "navigation". To hide it, inside style-for-print.css file code should be:
#navigation { display : none }
Or, if you don't want to have two css files, you can do it all in one file, with code like this:
@media print
{
/***** Styles for print ******/
h1, h2, h3 {color:black;}
#navigation {display:none}
}
@media screen {
/***** Styles for screen ******/
}
{
/***** Styles for print ******/
h1, h2, h3 {color:black;}
#navigation {display:none}
}
@media screen {
/***** Styles for screen ******/
}
No comments:
Post a Comment