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

Question

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?

As a side comment, `button > .cancel` would have not selected the cancel button, but an element with `cancel` class inside a button. The right selector would have been `button.cancel` (but that won't work anyway) — Alvaro Montoro, Sep 29 '15 at 13:07

score 22 · Answer 1 · edited Apr 10 '19 at 04:30

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.

please give us the solution, I need to know if the user click the `print` button in order to print an invoice with ORIGINAL tag so later I put a flag in database and allowing to print only DUPLICATE, TRIPLICATE and so on.. — user12163165, Aug 31 '20 at 22:21

score 7 · Answer 2 · answered Jul 16 '19 at 12:14

7

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.

answered Jul 16 '19 at 12:14

Madness

125
1
10

6

In the question he wanted to know which button is pressed `cancel` or `print` – user12163165 Aug 31 '20 at 22:24

score 2 · Answer 3 · answered Oct 11 '21 at 16:55

2

<script>
            window.print();

            onafterprint = function () {
                window.location.href = "index.html";
            }
</script>

answered Oct 11 '21 at 16:55

Nashwan

311
4
13

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 12 '21 at 14:01

score 1 · Answer 4 · edited May 23 '17 at 12:00

1

As far as I know, the print preview is not part of any document your JS can access. These might interest you:

Detecting browser print event

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

edited May 23 '17 at 12:00

Community

1
1

answered Apr 28 '15 at 07:34

ekuusela

5,034
1
25
43

score -3 · Answer 5 · edited Feb 13 '18 at 09:13

This should do the trick. I've used jQuery v2.2.0 which is included in the html file.

$("#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");
    }
});

I guess this might as well be used as a way to print certain divs in your html. Just hide the body element and only show the div that you want to print with some positioning css. Hope it works in yours. I've tried it and I can say that it worked for me.

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

5 Answers5

Linked