Xác định Nếu In/Cancel Button trong Preview In Google Chrome được Clicked

Question

Ive được in trang của tôi bằng cách sử dụng mã bên dưới:

window.print(); 

Một hình ảnh dưới đây là những gì in xem trước trong Google chrome trình duyệt như thế nào. Nó có hai nút chính: print và cancel.

Tôi muốn biết nếu người dùng đã nhấp vào nút print hoặc cancel. Những gì tôi đã làm là tôi sử dụng jquery:

HTML Code của Preview In:

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

Jquery Code:

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

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

Tôi đã thử các mã trên không có may mắn. Tôi đang mất tích ở đâu?

Answer 1

Theo như tôi biết, xem trước khi in không phải là một phần của bất kỳ document JS của bạn có thể truy cập. Đây có thể bạn quan tâm:

Detecting browser print event

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

Answer 2

Bạn không thể truy cập vào cửa sổ bên trong Chrome (thoại trong trường hợp này in) directtly từ một trang web thông thường.

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

    }()); 

Hoặc nếu bạn muốn làm điều gì đó khi xem trước bản in được mở, bạn có thể thử bên dưới.

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

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

tham khảo: How to capture the click event on the default print menu called by Javascript window.print()

Có thể nếu bạn cung cấp yêu cầu của bạn mà bạn đang cố gắng cho hai nút này nhấn sự kiện, sau đó chúng tôi có thể cung cấp cho bạn giải pháp thay thế cho điều đó.

Answer 3

này nên làm các trick. Tôi đã sử dụng jQuery v2.2.0 được bao gồm trong tệp 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"); 
    } 
}); 

Tôi đoán điều này cũng có thể được sử dụng như một cách để in một số div nhất định trong html của bạn. Chỉ cần ẩn phần tử body và chỉ hiển thị div mà bạn muốn in bằng một số định vị css. Hy vọng nó hoạt động trong của bạn. Tôi đã thử nó và tôi có thể nói rằng nó làm việc cho tôi.