Introduction

if you want to show a print preview page before printing any page, then you have to make a page like that currently is showing.

or you want to print a particular section of that page like only Data Grid, HTML Table, or any others section. And you also need to preview of that in a separate page before printing. So, you have to create a separate print preview page to show that which is more painful for you.

i have introduced a technique to avoid this problem. You do not need to create a separate page for print preview. You just use Script.js JavaScript code to create print preview page dynamically. It will take less time to implement and so faster. Hopefully it will helpful for you.

printpreview1.gif

printpreview2.gif

Background (optional)

i was developing a report module in my existing project. Those Reports content generated dynamically by giving input (like generate by status, date range, etc). And there was a print button also to print. Client wanted to view a print preview page before print but we had already completed this module on that time. It was really hard situation for my developers to build print preview page for all reports. I got this idea during that situation.

Using the code

you will just add 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  …  portion 
pp.document.writeln('')
pp.document.writeln('')
pp.document.writeln('')
pp.document.writeln('')
//Adding Body Tag
pp.document.writeln('
pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
//Adding form Tag
pp.document.writeln('');
//Creating two buttons Print and Close within a HTML table
pp.document.writeln('
');
pp.document.writeln('');
pp.document.writeln('');
pp.document.writeln('
');
//Writing print area of the calling page
pp.document.writeln(document.getelementbyid(print_area).innerhtml);
//Ending Tag of ,  and 
pp.document.writeln(''); 
} 

getPrint(print_area) Function take DIV Id which section you want to print. Then, it creates a new page object and it writes necessary HTML tags and add print and close button and finally it writes print_area content and closing tag.

and call the following way from the aspx page. Here, getPrint('print_area') has been added for printing print_area DIV section. print_area is the DIV id of DataGrid and rest of two will work for others DIVs.So, whatever areas that you want to print must be defined inside of DIV tags. 
 And include Script.js file in the aspx page.

 '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 getPrint() function.

i have used the following code in demo project to generate sample dategrid

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 the seperate style sheet page. see PrintStyle.css if you want to hide print and close button during printing

#PRINT ,#CLOSE
{
    visibility:hidden;
}

Points of Interest

i was facing problem during print. Print was not working when 1st time clicked. I solved that problem by reload location.reload(true); that page. So, use this code. Cheers.

Revision History

4-19-2006:

• 2nd revision. Incorporated readers comments: fleshed out several concepts, modify few sections (sorry BigJim61, I think i have discussed more in my article now).

4-17-2006:

• First revision. added one sections

4-15-2006:

• Original article

About Md. Jannatul Ferdous