Client Side Web Development

Re: Print View open new window

Lance Zhang - MSFT — Wed, 09 Jul 2008 05:51:18 GMT

Hi Steve

sameer_khanjit’s code is good; it can print the DIV which you need be printed only.
Otherwise, If you want to control the print effect by CSS, the following demo from:
http://blog.csdn.net/net_lover/archive/2004/07/06/35228.aspx
May be helpful:

<style>
@media print{
INPUT {display:none}
}
</style>
<TABLE border="0" style="font-size:9pt;" width="300px" align="center">
<THEAD style="display:table-header-group;font-weight:bold">
<TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red">Table Header</TD></TR>
</THEAD>
<TBODY style="text-align:center"">
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR style="page-break-after:always;"><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR style="page-break-after:always;"><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR><TD>content</TD><TD>content</TD></TR>
<TR style="page-break-after:always;"><TD>content</TD><TD>content</TD></TR>
</TBODY>
<TFOOT style="display:table-footer-group;font-weight:bold">
<TR>
<TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">Table Root</TD>
</TR>
</TFOOT>
</TABLE>
<input type=button value="print" onclick="window.print()">

If I’ve misunderstood your problem, please feel free to let me know.

Thanks.

Re: Print View open new window

sameer_khanjit — Mon, 07 Jul 2008 09:40:40 GMT

here is only one way to print selected html to print

function getPrint(print_area)
        {
            //Creating new page
            //var pp = window.open('','MenuAlaCarte','fullscreen=1,scrollbars=1');
            var pp = window.open('','MenuAlaCarte','height=1024,width=1024,alwaysLowered=0,alwaysRaised=0,channelmode=0,dependent=0,directories=0,fullscreen=1,hotkeys=1,location=0,menubar=0,resizable=1,scrollbars=1,status=0,titlebar=1,toolbar=0,z-lock=0');

            //Adding HTML opening tag with <HEAD> … </HEAD> portion
            pp.document.writeln('<HTML><HEAD><link rel="stylesheet" type="text/css" href="style/style.css" /><title>Print Preview</title><LINK href=Styles.css type="text/css" rel="stylesheet">')
            pp.document.writeln('<LINK href=PrintStyle.css type="text/css" rel="stylesheet" media="print"><base target="_self"></HEAD>')
            //Adding Body Tag
            pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
            //Adding form Tag
            pp.document.writeln('<form method="post">');
            //Creating two buttons Print and Close within a table
            pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right><INPUT ID="PRINT" type="button" class="button2" value="Print" onclick="javascript:location.reload(true);window.print();"><INPUT ID="CLOSE" type="button" class="button2" value="Close" onclick="window.close();"></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>');
//            pp.document.writeln('<script language="javascript" type="text/javascript">');
//            pp.document.writeln('function Print(){');
//            pp.document.writeln('    window.print();');
//        //    pp.document.writeln('window.close();');
//            pp.document.writeln('        }Print();</script> ');
            return false;
        }

on click of print button u call the getPrint(print_area) function with one parameter (Id of DIV)

Print View open new window

Steve Mracek — Sun, 06 Jul 2008 22:58:19 GMT

Hello, I have the code below in my master page header. I have a "Printer Friendly" link. What would I need to do so a new window will open when user clicks the "Printer Friendly" link applying the "print.css"??

Thanks Steve