locked
window.print(); Issue RRS feed

  • Question

  • User-991452307 posted
    I tried to print something using window.print();
    
    It is working, but whenever I click my print button for the second time without reloading the page (which is unnecessary), 
    the window print will appear again even though I already click on close button. After the code runs until $('#main').show(); , it goes back to window.print(); again.
    And if I tried for the third time, it will reload the window print 3 times and so on.
    I'm not sure how to terminate the query after I close the window for the first time.
    I do not want the window to be reloaded again. This is my code; self.PrintQrCode = function (obj) { $('#main').hide(); $('#QrCodePrint').show(); $("#test").on("load", function () { window.print(); $('#QrCodePrint').hide(); $('#main').show(); });
    Tuesday, April 6, 2021 8:42 AM

Answers

  • User-991452307 posted

    Hi Yij Sun, 

    Thank you for your excellent suggestion =)

    This problem has been resolved, however, my approach is to take out the "self.PrintQrCode();" function from

    self.GetQrCode

    .
    And did this instead:

    function printFunc() {
        $('#btn').hide();
        var divToPrint = document.getElementById('printarea');
        var htmlToPrint = '' +
            '<style type="text/css">' +
            'table th, table td {' +
            'border:1px solid #000;' +
            'padding;0.5em;' +
            '}' +
            '</style>';
        htmlToPrint += divToPrint.outerHTML;
        newWin = window.open("");
        newWin.document.write("");
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
        $('#btn').show();
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 19, 2021 4:28 AM

All replies

  • User409696431 posted

    Try adding

    return false;

    after the window.print(); line.  Otherwise the button click acts as a form submission, and your page reloads.

    Tuesday, April 6, 2021 5:37 PM
  • User1535942433 posted

    Hi MommyAiraa,

    As far as I think,you could use 'return false' or button click event instead of load event.

    Best regards,

    Yijing Sun

    Wednesday, April 7, 2021 3:56 AM
  • User-991452307 posted

    Hi Yij sun, 

    Thank you for replying. 

    I have tried the 'return false', but it will stop at that line without executing the 2 lines below; which is to hide the QR code and show again the main page after the print window is closed; 

     $('#QrCodePrint').hide();
     $('#main').show();]

    And, can you show me how to use the button click event instead? I will try from my end. Thanks. 

    Thursday, April 8, 2021 12:47 AM
  • User-991452307 posted

    Hi KathyW, 

    Thank you for replying. 

    I have tried the 'return false', but it will stop at that line without executing the 2 lines below; which is to hide the QR code and show again the main page after the print window is closed; 

     $('#QrCodePrint').hide();
     $('#main').show();]

    Thursday, April 8, 2021 12:48 AM
  • User409696431 posted

    An obvious thing to try is to move return false after those two lines.

    Thursday, April 8, 2021 1:09 AM
  • User-991452307 posted

    tried, but after the return false line, it still go back to window print line. 

    Thursday, April 8, 2021 1:11 AM
  • User1535942433 posted

    Hi MommyAiraa,

    As far as I think,you could use button click function. Just like this:

     <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $(function () {
                $("#main").hide();
                $("#QrCodePrint").show();
                $("#Button1").on('click', function () {
                    window.print();
                    $("#QrCodePrint").hide();
                    $("#main").show();
                })
    
            })
        </script>
     <div>
                <asp:Button ID="Button1" runat="server" Text="print" />
                <div id="main">tessts </div>
                <div id="QrCodePrint">QRCode</div>
            </div>

    Best regards,

    Yijing Sun

    Thursday, April 8, 2021 5:16 AM
  • User-991452307 posted

    Hi Yij Sun, 

    Thank you for your excellent suggestion =)

    This problem has been resolved, however, my approach is to take out the "self.PrintQrCode();" function from

    self.GetQrCode

    .
    And did this instead:

    function printFunc() {
        $('#btn').hide();
        var divToPrint = document.getElementById('printarea');
        var htmlToPrint = '' +
            '<style type="text/css">' +
            'table th, table td {' +
            'border:1px solid #000;' +
            'padding;0.5em;' +
            '}' +
            '</style>';
        htmlToPrint += divToPrint.outerHTML;
        newWin = window.open("");
        newWin.document.write("");
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
        $('#btn').show();
    }
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 19, 2021 4:28 AM