Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Determine If Print/Cancel Button in Google Chrome's Print Preview is Clicked

I've been printing my page using the code below:

window.print();

An image below is what the print preview in Google chrome browser looks like. It has two main buttons: print and cancel.

enter image description here

I want to know if the user has clicked the print or cancel buttons. What I did uses jquery:

HTML Code of the Print Preview:

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

I tried the code above with no luck. What am I missing?

like image 932
alyssaeliyah Avatar asked Apr 28 '15 07:04

alyssaeliyah


People also ask

Can I turn off print preview in Chrome?

Navigate to your computer's desktop and right click on the Google Chrome icon. A menu will appear, select the “Properties” option from the menu. A properties window will be displayed. Locate the “Target” field in this window and append a space and the text -disable-print-preview to the end of existing string of text.

How do you cancel Google print?

Windows & Linux: Ctrl + p. Mac: ⌘ + p.


2 Answers

You can not access Chrome's internal windows (printing dialog in this case) directly from a regular web page.

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

    }());

Or, If you want to do something when the print preview gets opened, you can try below:

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

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

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

Maybe if you provide your requirements for this two buttons click event, we can provide you an alternate solution.

like image 120
Prashant Kankhara Avatar answered Sep 17 '22 08:09

Prashant Kankhara


it is very easily possible:

<body onafterprint="myFunction()">

The myFunction() that you can define within a tag will be fire when either the printing job is done or the cancel button was pressed.

like image 31
Madness Avatar answered Sep 18 '22 08:09

Madness