CODEWITHSUNDEEP
pdfbrowserprinting
TygerKrash
TygerKrash

Reputation: 1382

Detecting browser print event

Is it possible to detect when a user is printing something from their browser?

To complicate matters, if we are presenting a user with a PDF document in a new window is it possible to detect the printing of that document ( assuming the user prints it from the browser window)?

The closest I've been able to find is if we implement custom print functionality (something like this) and track when that is invoked

I'm primarily interested in a solution that works for internet explorer (6 or later)

Upvotes: 59

Views: 55258

Answers (4)

Teekin
Teekin

Reputation: 13289

For Internet Explorer, there are the events window.onbeforeprint and window.onafterprint but they don't work with any other browser and as a result they are usually useless.

They seem to work exactly the same for some reason, both executing their event handlers before the printing window opens.

But in case you want it anyway despite these caveats, here's an example:

window.onbeforeprint = function() {
    alert("Printing shall commence!");
}

Upvotes: 7

Carlos R.
Carlos R.

Reputation: 250

For anyone reading this on 2020. The addListener function is mostly deprecated in favor of addEventListener except for Safari:

if (window.matchMedia) {
  const media = window.matchMedia("print");
  const myFunc = mediaQueryList => {
    if (mediaQueryList.matches) {
      doStuff();
    }
  };
  try {
    media.addEventListener("change", myFunc);
  } catch (error) {
    try {
    media.addListener(myFunc);
    } catch (error) {
      console.debug('Error', error)
    }
  }
}

Reference: This other S.O question

Upvotes: 5

Christopher
Christopher

Reputation: 10627

If it's only for tracking purposes, perhaps you could set a background url in CSS print media to a server page (.aspx, .php, etc) and then do something on the server?

This guy claims it works.

This is not as versitile as TJ's solution, but it may be less buggy (see TJs blog post for issues he found) when only tracking is needed.

Upvotes: 2

TJ VanToll
TJ VanToll

Reputation: 12704

You can now detect a print request in IE 5+, Firefox 6+, Chrome 9+, and Safari 5+ using the following technique:

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

I go into more detail into what this is doing and what it can be used for at http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/.

Upvotes: 123

Related Questions