locked
Adjust printing to fit sizes (A4 and PVC card sizes) RRS feed

  • Question

  • User-1994446809 posted

    Hello Forum,

    I am trying to make two images in image controls to print out and fit the size of an A4 and a PVC card. After searching for solution for days I couldnt see any article that gave me a clear understanding. I tried to use print media query to achieve this but it seems not to work; when the print preview is displayed, the first image in the control does not fit A4 size. Also, the second image in image control to print according to PVC card size. Please can anybody help me out and what can be done to achieve this?

    Here is my HTML, CSS and Print Script function for the two images

    CSS Style for A4 Size

    <style type="text/css">
            #parent {
                ;
                width: 400px;
                height: 500px;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
            }
            #child {
                ;
                right: 40px;
                top: 40px;
                cursor: move;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility:hidden;
                background:unset;
                height:90px;
                width:86px
            }
            @media print {
                #Image3[size="A4"]{
    width: 210mm;
    height: 297mm; margin: 0; box-shadow: 0; } } #Image3{ } </style>

    HTML  and print function for A4 size

    <div class="form-horizontal">
                       <br />
                       <asp:Panel ID="pnlContents" runat="server">
                           <div class="page" id="parent" style="margin: 0 auto; margin-top: 0%;">
                               <asp:Image ID="Image1" runat="server" ImageUrl="~/images/cert5.jpg" width="400px" Height="500px" />
                               <div id="child1">
                                   <div id="child">
                                       <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
                                   </div>
                               </div>
                           </div>
                       </asp:Panel>
                       <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
                   </div>
    
    <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=450,width=350');
                printWindow.document.write('<html><head><title>Template</title>');
                printWindow.document.write('</head><body >');
    
                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>
    

    CSS Style for PVC card

    <style type="text/css">
            #parent {
                ;
                width: 400px;
                height: 500px;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
                border-radius:20px;
            }
            #Image1{
                border-radius: 20px;
            }
            @media print{
                .Image1{
                    width: 2.13in;
                    height: 3.38in;
                    margin: 0;
                }
            }
        </style>
    

    HTML for PVC Card size

    <div class="container" id="centered" style="margin-top: -2%; font-family: 'Comfortaa';">
                   <div class="form-horizontal">
                       <br />
                       <asp:Panel ID="pnlContents" runat="server">
                           <div class="page" id="parent" style="margin: 0 auto; margin-top: 0%;">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/cert5.jpg" width="400px" Height="500px" />                           <div id="child1">
                                   <div id="child">
                                       <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
                                   </div>
                               </div>
                           </div>
                       </asp:Panel>
                       <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
                   </div>
               </div>
    
    <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=450,width=350');
                printWindow.document.write('<html><head><title>Template</title>');
                printWindow.document.write('</head><body >');
    
                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>
    

    Monday, August 17, 2020 12:52 PM

All replies