|
|
|
Create Printer Friendly Using JavaScript
|
|
|
|
|
|
|
|
|
| |
1 people have rated this article
|
|
|
|
|
|
|
|
|
|
|
This article describes how to add a printing option to ASP.NET Page.
Please follow these steps:
Step 1
Drag and drop a button in your .aspx page. Name the button as btnPrint and text as Printer Friendly.
Step 2
We are going to use the Javascript function to create printer friendly option.
Let's assume your javascript function accepts two parameters.
1. Control Client ID
2. Title of the Page
In the page load event, add the following
btnPrint.Attributes.Add("onclick",String.Format("javascript:PrintControl('{0}','{1}');return false;",GridView1.ClientID,"Printer Friendly Sample Test"));
Step 3
Make sure you pass the Client ID not just the control ID. Be sure you add a return false to your onclick event.It avoids a postback.
Use the following script in your .aspx page surrounded by script tag.
function PrintGridView(GridViewClientID,PageTitle)
{
try
{
var TableID=document.getElementById(GridViewClientID);
var PrintWindow=window.open("","","SCROLLBARS=YES,WIDTH=700,HEIGHT=700,LEFT=10,TOP=10,RESIZABLE=YES");
var PrintStyles="body{font: 10pt Verdana,sans-serif;}";
PrintStyles+="@media screen { .UserFriendlyButton {font: 10pt Verdana,sans-serif;text-align: center;color:black;background-color:#faf4ee;";
PrintStyles+="border: 1px solid #f68206;cursor: hand; padding:2px 8px 2px 8px; width:10px;} }";
PrintStyles+="#PrintOptionCell INPUT,.DrillDownAnchorTag {display:none;}";
PrintStyles+="@media print {.UserFriendlyButton{display:none;}}";
var OptionTable='<table cellpadding="0" cellspacing="0">';
OptionTable+='<tr>';
OptionTable+='<td valign="top"><A onclick="javascript:window.print();"><div class="UserFriendlyButton" style="width: 52px"> Print </div></A></td>';
OptionTable+='<td > </td>';
OptionTable+='<td valign="top"><A onclick="javascript:window.close();"><div class="UserFriendlyButton" style="width: 106px">CloseWindow</div></A></td>';
OptionTable+='</tr></table> ';
PrintWindow.document.open();
PrintWindow.document.write("<html>");
PrintWindow.document.write('<head><title>'+PageTitle+'</title></head><style>'+PrintStyles+'</style>');
PrintWindow.document.write("<body>");
PrintWindow.document.write(OptionTable);
PrintWindow.document.write("<br>");
PrintWindow.document.write(TableID.parentNode.innerHTML);
PrintWindow.document.write("<br>");
PrintWindow.document.write(OptionTable);
PrintWindow.document.write("</body>");
PrintWindow.document.write("</html>");
//Print won't work without close()
PrintWindow.document.close();
}
catch(e)
{
alert(e);
}
}
If your adding the javascript fuction in the separate .js file. Then add the following to the .aspx page.
<script type="text/javascript" src="PrintScript.js"></script>
Step 4
Now you run the website and hit the print button, a popup window will be shown with
control's inner HTML.
If you want to print more than one control in same popup window, then pass controls
ID to javascript function.
btnPrint.Attributes.Add("onclick",String.Format("javascript:PrintControl('{0}','{1}','{2}');return
false;",GridView1.ClientID,DataGrid1.ClientID,"Print Two controls"));
Also make sure your javascript has same number of parameters.
function PrintGridView(GridViewClientID,DataGridClientID,PageTitle)
{
var TableID1=document.getElementById(GridViewClientID);
var TableID2=document.getElementById(DataGridClientID);
.
.
.
PrintWindow.document.write(TableID1.parentNode.innerHTML);
PrintWindow.document.write(TableID2.parentNode.innerHTML);
.
.
.
}
|
|
Please Sign In In to post messages.
|