Comment détecter la fin de window.print()

Question

Dans mon application, j'ai essayé d'imprimer une page de bons pour l'utilisateur comme ceci :

  var htm ="<div>Voucher Details</div>";
  $('#divprint').html(htm);
  window.setTimeout('window.print()',2000);

' divprint est un div dans ma page qui stocke des informations sur le bon d'achat.

Cela fonctionne, et la page d'impression s'affiche. Mais je veux faire avancer l'application une fois que l'utilisateur a cliqué sur " ". print ou close dans la boîte de dialogue d'impression du navigateur.

Par exemple, je voudrais rediriger l'utilisateur vers une autre page après la fermeture de la fenêtre pop-up :

window.application.directtoantherpage();//a function which direct user to other page

Comment puis-je déterminer quand la fenêtre pop-up d'impression est fermée ou quand l'impression est terminée ?

Answer 1

Cela fonctionne pour moi avec $(window).focus().

var w;
var src = 'http://pagetoprint';
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
    w = $('<iframe></iframe>');
    w.attr('src', src);
    w.css('display', 'none');
    $('body').append(w);
    w.load(function() {
        w[0].focus();
        w[0].contentWindow.print();
    });
    $(window).focus(function() {
        console.log('After print');
    });
}
else {
    w = window.open(src);
    $(w).unload(function() {
        console.log('After print');
    });
}

Answer 2

Le moyen le plus simple de détecter si l'impression est terminée et de fermer la fenêtre d'impression :

window.onafterprint = function(){ 
  window.onfocus = function(){  
    window.close();
  }
};

Answer 3

Je pense que l'approche de la focalisation sur la fenêtre est la bonne. Voici un exemple dans lequel je voulais ouvrir une url PDF dans une iframe cachée et l'imprimer. Après l'avoir imprimé ou annulé, je voulais supprimer la iframe.

/**
 * printBlob will create if not exists an iframe to load
 * the pdf. Once the window is loaded, the PDF is printed.
 * It then creates a one-time event to remove the iframe from
 * the window.
 * @param {string} src Blob or any printable url.
 */
export const printBlob = (src) => {
  if (typeof window === 'undefined') {
    throw new Error('You cannot print url without defined window.');
  }
  const iframeId = 'pdf-print-iframe';
  let iframe = document.getElementById(iframeId);
  if (!iframe) {
    iframe = document.createElement('iframe');
    iframe.setAttribute('id', iframeId);
    iframe.setAttribute('style', 'position:absolute;left:-9999px');
    document.body.append(iframe);
  }
  iframe.setAttribute('src', src);
  iframe.addEventListener('load', () => {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    const infanticide = () => {
      iframe.parentElement.removeChild(iframe);
      window.removeEventListener('focus', infanticide);
    }
    window.addEventListener('focus', infanticide);
  });
};

Answer 4

C'est difficile, en raison du comportement différent des navigateurs après l'impression. Desktop Chrome gère la boîte de dialogue d'impression en interne et ne modifie donc pas le focus après l'impression, afterprint L'événement fonctionne bien ici (à partir de maintenant, 81.0). D'autre part, Chrome sur les appareils mobiles et la plupart des autres navigateurs déplacent le focus après l'impression et l'événement afterprint ne fonctionne pas de manière cohérente ici. L'événement de mouvement de la souris ne fonctionne pas sur les appareils mobiles.

Donc, Détecter si c'est Desktop Chrome , Si Sí utiliser événement après impression . Si Non utiliser détection basée sur la mise au point . Vous pouvez également utiliser l'événement de mouvement de la souris (ne fonctionne que sur le bureau) en combinaison avec ces éléments, pour couvrir plus de navigateurs et plus de scénarios.

Answer 5

Implémentation de window.onbeforeprint et window.onafterprint

L'appel window.close() après le window.print() ne fonctionne pas dans Chrome v 78.0.3904.70

Pour aborder cette question, j'utilise la réponse d'Adam avec une simple modification :

     function print() {
    (function () {
       let afterPrintCounter = !!window.chrome ? 0 : 1;
       let beforePrintCounter = !!window.chrome ? 0 : 1;
       var beforePrint = function () {
          beforePrintCounter++;
          if (beforePrintCounter === 2) {
             console.log('Functionality to run before printing.');
          }
       };
       var afterPrint = function () {
          afterPrintCounter++;
          if (afterPrintCounter === 2) {
             console.log('Functionality to run after printing.');
             //window.close();
          }
       };
       if (window.matchMedia) {
          var mediaQueryList = window.matchMedia('print');
          mediaQueryList.addListener(function (mql) {
             if (mql.matches) {
                beforePrint();
             } else {
                afterPrint();
             }
          });
       }
       window.onbeforeprint = beforePrint;
       window.onafterprint = afterPrint;
    }());
    //window.print(); //To print the page when it is loaded
 }

Je l'appelle ici :

<body onload="print();">

Cela fonctionne pour moi. Notez que j'utilise un compteur pour les deux fonctions, afin de pouvoir gérer cet événement dans différents navigateurs (se déclenche deux fois dans Chrome, et une fois dans Mozilla). Pour détecter le navigateur, vous pouvez vous référer à cette réponse