Detecting browser print event

Question

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)

Solution 1

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/.

Solution 2

For Internet Exploder, 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!");
}

Solution 3

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.

Solution 4

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

View more solutions

Comments

[Pat]

You're awesome. I've been searching for onbeforeprint Chrome/Safari support for days. Should've known better than to leave the warming embrace of SO.

[Andy E]

+1, very nice, I'm planning on plagiarising this answer very shortly.

[Adam K Dean]

I think there were a few problems with my approach, such as print previews etc, but for less than critical logging, it worked OK for me.

[Michael]

This no longer seems to work in Chrome 38 on Windows. beforePrint never fires. jsfiddle.net/o5oosa9o (Right click the Results iframe and choose "Print...")

[Marcel Burkhard]

And afterPrint now fires in Chrome as soon as the print preview has finished rendering

[Andreas Covidiot]

last two comments confirmed with Chrome 39.0 as well :-(

[Razgriz]

Sorry for bumping this but I was led here from my question (stackoverflow.com/questions/28620711/…), what if I want to detect the actual pressing of the "Print" button and not just any print request that the user issued?

[wintersylf]

on a Windows Server 2008 R2 box: 1) IE 11 fires the after event, before the print dialogue even comes up, 2) on Chrome 41.0.2272.89 m the after even fires as soon as the user hits the print button. this means that when printing to a file, if there's a dialogue that requests the file name to print to, the after even fires before that, 3) Firefox 36.0.1 behaves the same as Chrome. this means that closing window when the event fires won't work properly

[BenjaminGolder]

Does this detect printing a pdf from the browser, as described in the question?

[X-HuMan]

I was using this "if ('matchMedia' in window)" along with window.onbeforeprint, which was a year ago, just stopped to work few days ago after the browser update. This answer seems a lot more stable.

[Admin]

Saved me a lot of time

[Ωmega]

It is not called before printing is requested, but before the rendering is executed. Therefore if you for example change document.title inside of beforePrint() function, it is too late to have such change included in the printing result.

[Bernardo Dal Corno]

dont know if Internet Exploder was a typo or not, but it was awesome kkkk

[Avatar]

FYI developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers‌​/…

[user12163165]

the onafterprint event worth nothing if it fires when the user either click on the cancel or print button !!!