|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
IntroductionIf you want to show a print preview page before printing any page, then you have to make a page like the one that currently is showing. Or, if you want to print a particular section of that page, like only a I have introduced a technique to avoid this problem. You do not need to create a separate page for print preview. You just use the JavaScript code in Script.js to create a print preview page dynamically. It will take less time to implement and so is faster. Hopefully, it will be helpful for you. BackgroundI was developing a report module in my existing project. The report contents are generated dynamically by giving input (like generate by status, date range, etc). And, there is a print button to print. My client wanted to view a print preview page before printing, but we had already completed this module then. It was a really hard situation for my developers to build a print preview page for all the reports. I got this idea during that situation. Using the codeYou will just add the Script.js file in your project. The following code has been written in that file. Source code//Generating Pop-up Print Preview page
function getPrint(print_area)
{
//Creating new page
var pp = window.open();
//Adding HTML opening tag with <HEAD> … </HEAD> portion
pp.document.writeln('<HTML><HEAD><title>Print Preview</title>')
pp.document.writeln('<LINK href=Styles.css type="text/css" rel="stylesheet">')
pp.document.writeln('<LINK href=PrintStyle.css ' +
'type="text/css" rel="stylesheet" media="print">')
pp.document.writeln('<base target="_self"></HEAD>')
//Adding Body Tag
pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0"');
pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
//Adding form Tag
pp.document.writeln('<form method="post">');
//Creating two buttons Print and Close within a HTML table
pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
pp.document.writeln('<INPUT ID="PRINT" type="button" value="Print" ');
pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
pp.document.writeln('<INPUT ID="CLOSE" type="button" ' +
'value="Close" onclick="window.close();">');
pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
//Writing print area of the calling page
pp.document.writeln(document.getElementById(print_area).innerHTML);
//Ending Tag of </form>, </body> and </HTML>
pp.document.writeln('</form></body></HTML>');
}
The Call the following from your ASPX page. Here, 'calling getPrint() function in the button onclick event
btnPrint.Attributes.Add("Onclick", "getPrint('print_area');")
btnTablePP.Attributes.Add("Onclick", "getPrint('Print_Table');")
btnPagepp.Attributes.Add("Onclick", "getPrint('Print_All');")
Download the source code to get the I have used the following code in the demo project to generate a sample Private Sub PopulateDataGrid()
'creating a sample datatable
Dim dt As New System.Data.DataTable("table1")
dt.Columns.Add("UserID")
dt.Columns.Add("UserName")
dt.Columns.Add("Phone")
Dim dr As Data.DataRow
dr = dt.NewRow
dr("UserID") = "1"
dr("UserName") = "Ferdous"
dr("Phone") = "+880 2 8125690"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("UserID") = "2"
dr("UserName") = "Dorin"
dr("Phone") = "+880 2 9115690"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("UserID") = "3"
dr("UserName") = "Sazzad"
dr("Phone") = "+880 2 8115690"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("UserID") = "4"
dr("UserName") = "Faruk"
dr("Phone") = "+880 2 8015690"
dt.Rows.Add(dr)
DataGrid1.DataSource = dt
DataGrid1.DataBind()
End Sub
Use the following code in a separate style sheet page. See PrintStyle.css if you want to hide the Print and Close buttons during printing. #PRINT ,#CLOSE
{
visibility:hidden;
}
Points of interestI was facing a problem during print. Print was not working the first time I clicked it. I solved that problem by reloading by using Revision history
|
||||||||||||||||||||||
Thanks Mohammad it works great for me.
News 
Joke 
Rant 
Admin