I have a aspx page with gridview data. I want to display it in printable format in separate poupup window. Then allow me to print by clicking on print button on this print friend format page.
Solution:
Since you are just adding a gridview in the pop up window, here are my suggestions to have your own printer friendly page:
1. Add a table with no formatting [You can just maintain cell padding, spacing etc., no boarders, bold font etc]
2. Fix the width of the table [say 600px for A4 size print]
3. Align this fixed table to left
4. Simply add the gridview in one of the columns
5. If you would like to hide any controls during printing, you can add extra CSS file in your page with [media=printer]
Printing simple page:
<!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
window.print();
}
</script>
</head>
<body>
<input type="button" value="Print this page" OnClientClick="printpage()" />
</body>
</html>
Printing an external page:
function printExternal() {
printWindow = new Object();
printWindow = window.open( myWindow, "index.html");
printWindow.print();
printWindow.close();
}
Hide controls or section of page when it is printed:
Create a noprint class like this:
<style>
@media print
{
.noprint {display:none; }
}
</style>
Then I used this noprint class in a table column's content that I did not want to print.
<td valign="top" width="220px" class="noprint">
<uc1:ListOption ID="ListOption1" runat="server" />
<br />
<uc3:AdminOption ID="AdminOption1" runat="server" />
<br />
<uc4:Search ID="Search1" runat="server" />
<br />
</td>
How Do I Hide Screen Elements When a Page Is Printed?
It's often useful to hide certain elements when a page gets printed. For example, your Navigation Menu, or a Search button are usually pretty useless on paper.
In the old days, this was often implemented with a separate "printer friendly" page. A big disadvantage of this solution is that you need to create two pages; one normal page, and a page that just displays the content you want to be printed. This means updating two pages whenever the content or the design of your site changes.
But did you know you can use some CSS to hide screen elements you don't want to display when the page gets printed? Modern, standard compliant browsers support embedding a style sheet specifically for print media. Whenever a page gets printed, the browser first applies the normal style sheet and then this print sheet. This means you can use the print sheet to override or extend the style sheet info from your normal sheet.
Inside that style sheet you can define a special class (like NonPrintable or any other name you choose) that hides the elements you don't want to appear on paper. Alternatively, you can also override the behavior for your other classes so they are hidden when printed. CSS information defined in the print style sheet will take precedence when the page is printed. Consider the following example that hides an HTML form button when the page is printed:
<html> <head> <title>Non Printable Stuff</title> <link href="/Styles/MainStyle.css" rel="stylesheet" type="text/css">
<link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
</head> <body> <input type="button" value="I am hidden" class="NonPrintable"> </body> </html>
.NonPrintable
{
display: none;
}
{
display: none;
}
In the print style sheet, you can also hide other elements like your menu, header, footer or whatever it is you don't want to be printed:
.NonPrintable, #Menu, #Footer
{
display: none;
}
{
display: none;
}
You can use this trick in combination with a reversed, .PrintOnly class that only outputs stuff when the page is printed. This can be useful to display the full address of hyperlinks, for example.
Besides the separate style sheet, you can also use embedded style sheets with the media attribute, like this:
<html> <head> <title>Non Printable Stuff</title> <link href="/Styles/MainStyle.css" rel="stylesheet" type="text/css"> <link href="/Styles/PrintStyle.css" rel=" stylesheet" type="text/css" media="print">
<style type="text/css" media="print">
.NonPrintable
{
display: none;
}
</style>
</head> <body> <input type="button" value="I am hidden" class="NonPrintable"> </body> </html>
If you want a running example of this, click the "Print this Page" in the Details section in the upper left-hand corner of this page. When you print the page, or request a Print Preview in the browser to save some trees, you'll see that all the navigation stuff, the logo and buttons are hidden. In addition, you can see a box at the end of the article with some details like the full URL of the article. This helps people to reconnect a printed document to its Web version at a later stage.
No comments:
Post a Comment