locked
Print Preview not in place RRS feed

  • Question

  • User-1994446809 posted

    On my web form where printing will take place, I have web page contents that will be printed upon preview. These are two image controls with ID as "parent" and "child". This is shown in the code below

    Print.aspx:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
       <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
       <title></title>
         <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link href="css/StyleSheet.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <style>
            #parent {
                ;
                width: 340px;
                height: 450px;
                border: solid 2px #00003D;
                font-size: 24px;
                text-align: center;
            }
            #child {
                ;
                right: 40px;
                top: 100px;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
            }
        </style>
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:no-display;">
    <form id="form1" runat="server">
         </div>
            <br /><br /><br /><br />
            <div>
                <asp:Panel ID="pnlContents" runat="server">
                    <div id="parent" style="margin: 0 auto; margin-top: 0%;">
                        <asp:Image ID="Image3" runat="server" Width="340" Height="450" />
                        <div id="child">
                            <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="105" Height="105" />
                        </div>
                    </div>
                </asp:Panel>
                <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-success" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
            </div>
        </form>
        <script>
            function PrintPanel() {
                var panel = document.getElementById("<%=pnlContents.ClientID %>");
                var printWindow = window.open('', '', 'height=400,width=800');
                printWindow.document.write('<html><head><title>Template</title>');
                printWindow.document.write('</head><body >');
                printWindow.document.write(panel.innerHTML);
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                setTimeout(function () {
                    printWindow.print();
                }, 5000);
                return false;
            }
        </script>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    But when I preview it for printing, the child image control moves out of the parent image control and goes to the bottom of the parent image control. All I want is to preview it as it were and print exactly as displayed on the web form before the preview.

    Thank you'

    George A.

    Sunday, May 17, 2020 9:47 PM

Answers

  • User753101303 posted

    Hi,

    You create a new page and copy HTML markup but without the styles. When I can I prefer to use https://www.sitepoint.com/css-printer-friendly-pages/ and have printing only styles. For example here you could use dispaly:none to hide everything but the control panel you want to print.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 17, 2020 10:14 PM
  • User-719153870 posted

    Hi georgeakpan233,

    The DOM element you get in this way cannot include the style code part, so these two pictures will be displayed without style.

    You can get this part of the style code by adding a tag, and then add it to the page to be printed, so that the picture will not move position.

    For details, please refer to the following example:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
         <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/popper.min.js"></script>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <!--startPrint-->
        <style>
            #parent {
                ;
                width: 340px;
                height: 450px;
                border: solid 2px #00003D;
                font-size: 24px;
                text-align: center;
            }
            #child {
                ;
                right: 40px;
                top: 100px;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
            }
        </style>
    </head>
    <body style=" background-color:#DCDCDC;  overflow-x:no-display;">
    <form id="form1" runat="server">
            <br /><br /><br /><br />
            <div>
                <asp:Panel ID="pnlContents" runat="server">
                    <div id="parent" style="margin: 0 auto; margin-top: 0%;">
                        <asp:Image ID="Image3" BackColor="Black" runat="server" Width="340" Height="450" />
                        <div id="child">
                            <asp:Image ID="Image4" runat="server" BackColor="White" BorderStyle="None" Width="105" Height="105" />
                        </div>
                    </div>
                </asp:Panel>
                <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-success" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
            </div>
        </form>
    </body>
            <script>
                function PrintPanel() {
                    var panel = document.getElementById("<%=pnlContents.ClientID %>");
                    var startStr = "<!--startPrint-->";
    
                    var headHtml = window.document.head.innerHTML;
                    var headPrint = headHtml.substr(headHtml.indexOf(startStr) + 17);
    
                    var printWindow = window.open('', '', 'height=400,width=800');
                    printWindow.document.write('<html><head><title>Template</title>');
                    //printWindow.document.write('</head><body >');
    
                     //add CSS code into the print page
                    printWindow.document.write(headPrint);
                    printWindow.document.write(panel.innerHTML);
                    printWindow.document.write('</body></html>');
                    printWindow.document.close();
                    setTimeout(function () {
                        printWindow.print();
                    }, 5000);
                    return false;
                }
        </script>
    </html>
    

    Result:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 18, 2020 8:37 AM

All replies

  • User753101303 posted

    Hi,

    You create a new page and copy HTML markup but without the styles. When I can I prefer to use https://www.sitepoint.com/css-printer-friendly-pages/ and have printing only styles. For example here you could use dispaly:none to hide everything but the control panel you want to print.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 17, 2020 10:14 PM
  • User-719153870 posted

    Hi georgeakpan233,

    The DOM element you get in this way cannot include the style code part, so these two pictures will be displayed without style.

    You can get this part of the style code by adding a tag, and then add it to the page to be printed, so that the picture will not move position.

    For details, please refer to the following example:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
         <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/popper.min.js"></script>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <!--startPrint-->
        <style>
            #parent {
                ;
                width: 340px;
                height: 450px;
                border: solid 2px #00003D;
                font-size: 24px;
                text-align: center;
            }
            #child {
                ;
                right: 40px;
                top: 100px;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
            }
        </style>
    </head>
    <body style=" background-color:#DCDCDC;  overflow-x:no-display;">
    <form id="form1" runat="server">
            <br /><br /><br /><br />
            <div>
                <asp:Panel ID="pnlContents" runat="server">
                    <div id="parent" style="margin: 0 auto; margin-top: 0%;">
                        <asp:Image ID="Image3" BackColor="Black" runat="server" Width="340" Height="450" />
                        <div id="child">
                            <asp:Image ID="Image4" runat="server" BackColor="White" BorderStyle="None" Width="105" Height="105" />
                        </div>
                    </div>
                </asp:Panel>
                <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-success" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
            </div>
        </form>
    </body>
            <script>
                function PrintPanel() {
                    var panel = document.getElementById("<%=pnlContents.ClientID %>");
                    var startStr = "<!--startPrint-->";
    
                    var headHtml = window.document.head.innerHTML;
                    var headPrint = headHtml.substr(headHtml.indexOf(startStr) + 17);
    
                    var printWindow = window.open('', '', 'height=400,width=800');
                    printWindow.document.write('<html><head><title>Template</title>');
                    //printWindow.document.write('</head><body >');
    
                     //add CSS code into the print page
                    printWindow.document.write(headPrint);
                    printWindow.document.write(panel.innerHTML);
                    printWindow.document.write('</body></html>');
                    printWindow.document.close();
                    setTimeout(function () {
                        printWindow.print();
                    }, 5000);
                    return false;
                }
        </script>
    </html>
    

    Result:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 18, 2020 8:37 AM
  • User-1994446809 posted
    Hi Yang Shen,
    I'm so grateful for your response. Thank you for everything, I really appreciate your help.

    George A.
    Monday, May 18, 2020 8:57 AM
  • User-1994446809 posted
    Hi PatriceSc,
    Thank you for your response. It's been helpful.

    George A.
    Monday, May 18, 2020 8:59 AM