web-dev-qa-db-fra.com

Déterminer si le bouton Imprimer / Annuler dans l'aperçu avant impression de Google Chrome est cliqué

J'ai imprimé ma page en utilisant le code ci-dessous:

window.print();

Une image ci-dessous est à quoi ressemble l'aperçu avant impression dans Google chrome chrome. Il a deux boutons principaux: print et cancel.

enter image description here

Je veux savoir si l'utilisateur a cliqué sur les boutons print ou cancel. Ce que j'ai fait utilise jquery:

Code HTML de l'aperçu avant impression:

<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>

Code Jquery:

 $('button > .cancel').click(function (e) {                
      alert('Cancel');
 });

 $('button > .print').click(function (e) {                
      alert('Print');
 });

J'ai essayé le code ci-dessus sans succès. Qu'est-ce que je rate?

javascriptjqueryhtmlgoogle-chromeprinting-web-page
15
aegc

Vous ne pouvez pas accéder aux fenêtres internes de Chrome (boîte de dialogue d'impression dans ce cas) directement à partir d'une page Web standard.

    (function () {

        var beforePrint = function () {
            alert('Functionality to run before printing.');
        };

        var afterPrint = function () {
            alert('Functionality to run after printing');
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');

            mediaQueryList.addListener(function (mql) {
                //alert($(mediaQueryList).html());
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;

    }());

Ou, si vous voulez faire quelque chose lorsque l'aperçu avant impression est ouvert, vous pouvez essayer ci-dessous:

$(document).bind("keyup keydown", function (e) {
         if (e.ctrlKey && e.keyCode == 80) {
             setTimeout(function () { CallAfterWindowLoad();}, 5000);
             return true;
         }
     });

    function CallAfterWindowLoad()
    {
        alert("Open and call");
    }

Référence: Comment capturer l'événement click dans le menu d'impression par défaut appelé par Javascript window.print ()

Peut-être que si vous fournissez vos exigences pour cet événement de clic avec deux boutons, nous pouvons vous proposer une solution alternative.

14
Prashant Kankhara

c'est très facilement possible:

<body onafterprint="myFunction()">

La fonction myFunction () que vous pouvez définir dans une balise se déclenche lorsque le travail d'impression est terminé ou lorsque le bouton d'annulation a été enfoncé.

4
Madness

Pour autant que je sache, l'aperçu avant impression ne fait partie d'aucune document à laquelle votre JS peut accéder. Ceux-ci pourraient vous intéresser:

Détection de l'événement d'impression du navigateur

ExtJS 4 - détection si l'utilisateur a appuyé sur "Imprimer" dans la boîte de dialogue d'impression qui a été appelée par programme

1
ekuusela

Cela devrait faire l'affaire. J'ai utilisé jQuery v2.2.0 qui est inclus dans le fichier html.

$("#print").click(function() { // calls the id of the button that will print
    document.body.style.visibility = 'hidden'; //code for hiding the body
    document.getElementById('printthis').style.visibility = 'visible'; // div to be printed
    document.getElementById('printthis').style.position = 'absolute'; //some code/css for positioning. you can adjust this
    document.getElementById('printthis').style.top = '40px';
    document.getElementById('printthis').style.left = '0px';
    if (print()) { // shows print preview.

    } else { // else statement will check if cancel button is clicked.
        document.body.style.visibility = 'visible';
        document.getElementById('printthis').style.position = '';
        document.getElementById('printthis').style.top = '';
        document.getElementById('printthis').style.left = '';
        alert("Print Canceled");
    }
});

Je suppose que cela pourrait aussi bien être utilisé comme un moyen d'imprimer certaines divs dans votre html. Il suffit de masquer l'élément body et d'afficher uniquement le div que vous souhaitez imprimer avec des CSS de positionnement. J'espère que cela fonctionne dans le vôtre. Je l'ai essayé et je peux dire que cela a fonctionné pour moi.

0
JayBee Rosalinda