Print View open new window

Last post 07-09-2008 1:51 AM by Lance Zhang - MSFT. 2 replies.

Sort Posts:

  • Print View open new window

    07-06-2008, 6:58 PM
    • Member
      55 point Member
    • Steve Mracek
    • Member since 02-04-2007, 5:11 PM
    • USA
    • Posts 128

    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

    <link rel="stylesheet" media="screen" type="text/css" href="screen.css" />

    <link rel="stylesheet" media="print" type="text/css" href="print.css" />

     

     

     

  • Re: Print View open new window

    07-07-2008, 5:40 AM
    • Contributor
      3,091 point Contributor
    • sameer_khanjit
    • Member since 12-10-2007, 1:06 PM
    • Indore India
    • Posts 638

     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)

    We Are Looking for .NET/PHP Projects

    Contact Details :-

     Email - sameer.khanjit@gmail.com

     Mobile no. : +91-9893795983

     View Blog

    linkedin Asp.net Group

    Don't forget to click “Mark as Answer” on the post that helped you
  • Re: Print View open new window

    07-09-2008, 1:51 AM
    Answer
    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.

     

    Lance Zhang
Page 1 of 1 (3 items)