Print Report in Web Application (IE) without using third party tool

 

We can also print reports in web browsers like Internet Explorer without using third party tools like Crystal Reports.

I have illustrated here how to accomplish it using window.print() function of JavaScript.

 

First open a new window without toolbars and sizes properly adjusted so that, it looks like report. But, Plz, note that it is not compulsory, you can print any web page.

The code is here.

 

<script language="Javascript">

 

var PLReport;

function f_Print()

{

            if (!PLReport || PLReport.closed)

            {

PLPrint=window.open("PLReport.asp?InvNum=" + Invnum,'windregn','width=800,height=600,toolbar=no,scrollbars=yes,resizable=yes,left=80,top=20');

            }

            else

            {

                        PLReport.focus();

            }

}

</script>

 

The above function opens a new window without toolbar if it is not opened or else if it already opened, it sets focus on that.

 

Now, populate the data in the new web page opened PLReport.asp.

Also, display a print button for users to print or else you can directly call print function in onload() event of body of html.

 

But, important point to be noted is that the components that need not to be printed should be hidden while printing. For example, the print button needs not to be printed so, it can be placed inside <div> of html and while printing the <div> can be hidden like this.

 

<div id="div4" name="div4">&nbsp;&nbsp;

<img src="images/print.gif" alt="Print Page" width="16" height="16" style="cursor:hand" onclick="PrintPage()" >&nbsp;

<label style="cursor:hand" onclick="PrintPage()" ><u>P</u>rint Packing List</label>

</div>

 

In above code, inside div4 a print button and print image is kept.

Now, they can be hidden like this while printing.

 

<script language="Javascript">             

            function PrintPage()

                                    {                                                                                             

                                                document.all.div4.style.visibility  = "hidden";

                                                var a = window.print();                                                                                                           document.all.div4.style.visibility  = "visible";

                                                           

                                    }                                 

</script>