Click here to Skip to main content
15,071,205 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I tried to print something using window.print();

However, when I click my trigger button for the second time, the window print appear again after I 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.

This is my code;
JavaScript
self.PrintQrCode = function (obj) {
    $('#main').hide();
    $('#QrCodePrint').show();
    $("#test").on("load", function () {
        window.print();
        $('#QrCodePrint').hide();
        $('#main').show();
    });


What I have tried:

setTimeout(function () {
     $(window).one('mousemove', window.onafterprint);
   }, 1);


I tried with return.false(); after window.print() line also not working.
Posted
Updated 13-Apr-21 20:12pm
v4

The problem is that you are registering the "load" event every time you call the PrintQrCode function. That means the code within that event will fire for each registered listener. That is, it will stack each time you call the function.

You either need to move the on call outside of the function (so it only happens once), or don't use it at all. Given your limited example, I can't see a need to use it all. So give this a try:

JavaScript
self.PrintQrCode = function (obj) {
    $('#main').hide();
    $('#QrCodePrint').show();
    window.print();
    $('#QrCodePrint').hide();
    $('#main').show();
};


Also, I would suggest you look into CSS media queries for handling what appears during printing. Something like this: CSS Printing - @media Rule - Tutorialspoint[^]


After your comment with further code. It looks like you are needing to wait for the image to load before you can print, so I suggest you do something like this:

JavaScript
// We track this to know if a print needs to be called after image load or not.
self.IsPrintQueued = false;

self.GetQrCode = function(obj) {
  var ID = obj.Id;
  $.ajax({
    url: '/QC/GetQrCode',
    cache: false,
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    data: {
      rejectsId: ID
    },
    success: function(rejectsId) {
      self.QrCode(rejectsId.QRCode);

      // We check to see if the image is already loaded.
      var currentSrc = $("#test").attr('src');
      if (currentSrc === rejectsId.QRCode) {
        self.PrintQrCode();
      } else {
        self.IsPrintQueued = true;
        $("#test").attr('src', rejectsId.QRCode);
      }
    }
  });
}

self.PrintQrCode = function(obj) {
  $('#main').hide();
  $('#QrCodePrint').show();
  window.print();
  $('#QrCodePrint').hide();
  $('#main').show();
}

$("#test").on("load", function() {
  if (self.IsPrintQueued) {
    self.IsPrintQueued = false;
    self.PrintQrCode();
  }
});


Not sure if that show/hide of main is going to work though... if it doesn't, try using the CSS media rules I linked above.
   
v3
Comments
Member 15015917 8-Apr-21 20:00pm
   
Hi,

this is my full code;

self.GetQrCode = function (obj) {
var ID = obj.Id;
$.ajax({
url: '/QC/GetQrCode',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: { rejectsId: ID },
success: function (rejectsId) {
self.QrCode(rejectsId.QRCode);
//$("#test").attr('src', rejectsId.QRCode);
self.PrintQrCode();
}
});
}


self.PrintQrCode = function (obj) {
$('#main').hide();
$('#QrCodePrint').show();
$("#test").on("load", function () {
window.print();
$('#QrCodePrint').hide();
$('#main').show();

});
}
I took out
self.PrintQrCode();
function from
self.GetQrCode
.
And did this in java:

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();
}
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900