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

Asked 28/4, 2015 at 7:26 Answered 5/9, 2023 at 11:10

javascript jquery html google-chrome printing-web-page

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?

Silverplate answered 28/4, 2015 at 7:26 Comment(4)

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) – Paradox 29/9, 2015 at 13:7

I also wants know about cross browser solution is any – Intrusive 30/9, 2015 at 10:19

U want to find what??? the behind coding inside print? – Elsworth 5/10, 2015 at 4:36

@Silverplate Did you find any solution for this? – Kurtiskurtosis 21/4, 2022 at 8:23

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.

Ossified answered 3/10, 2015 at 8:53 Comment(2)

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.. – Threepiece 31/8, 2020 at 22:21

@Threepiece that's simply not possible. – Tops 19/2, 2021 at 5:35

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.

Cock answered 16/7, 2019 at 12:14 Comment(1)

In the question he wanted to know which button is pressed cancel or print – Threepiece 31/8, 2020 at 22:24

<script>
            window.print();

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

Stilliform answered 11/10, 2021 at 16:55 Comment(1)

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: stackoverflow.com/help/how-to-answer . Good luck 🙂 – Schleswigholstein 12/10, 2021 at 14: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

Kuwait answered 28/4, 2015 at 7:34 Comment(0)

Try this adjusted code:

<html>
    <head>
    <script>
    function wind()
    {
        
    document.getElementById('prin').style.display='none'; 
        window.print();
        window.addEventListener("click", function()
        {
            document.getElementById('prin').style.display='block';
        }
        );
    }
    </script>
    </head>
    <body>
        <button id="prin" onclick="wind()">Print</button>
    </body>
    </html>

Lorenalorene answered 5/9, 2023 at 11:10 Comment(1)

Inside the anonymous function write console.log('its working')';,so that you come to know user has clicked cancel/print in printing prompt – Lorenalorene 5/9, 2023 at 11:18

-3

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.

Morphology answered 13/2, 2018 at 8:49 Comment(0)

Recommended topics

Hot tags