Ustal Jeśli Print/Anuluj Przycisk w Google Chrome Print Preview kliknięciu

Question

Ive drukowania moją stronę za pomocą poniższego kodu:

window.print(); 

Obraz poniżej jest co podgląd wydruku w Google przeglądarka chrom wygląda. Ma dwa główne przyciski: print i cancel.

Chcę wiedzieć, czy użytkownik musiał kliknąć przycisk print lub cancel. Co zrobiłem to używam jQuery:

HTML kod podglądzie wydruku:

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

kod jQuery:

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

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

Próbowałem powyższy kod bez powodzenia. Gdzie ja tęsknię?

Answer 1

O ile mi wiadomo, podgląd wydruku nie jest częścią żadnego z document dostępnego dla JS. Mogą Cię interesować:

Detecting browser print event

ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically

Answer 2

Nie można uzyskać dostępu wewnętrzne okna Chrome (druk dialog w tym przypadku) directtly od zwykłej stronie internetowej.

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

    }()); 

Lub Jeśli chcesz coś zrobić, gdy podgląd wydruku zostanie otwarty, możesz wypróbować poniższe.

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

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

referencyjny: How to capture the click event on the default print menu called by Javascript window.print()

Może być, jeśli podasz swoje wymagania dla którego próbujesz do tego dwa przyciski kliknij zdarzenie, to możemy zapewnić Państwu alternatywne rozwiązanie dla tego.

Answer 3

To powinno wystarczyć. Użyłem jQuery v2.2.0, który jest zawarty w pliku 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"); 
    } 
}); 

myślę, że to równie dobrze może być stosowany jako sposób drukować pewne div w HTML. Po prostu ukryj element body i pokazuj tylko element div, który chcesz wydrukować, z niektórymi pozycjami css. Mam nadzieję, że działa w twoim. Próbowałem tego i mogę powiedzieć, że zadziałało to dla mnie.