window.matchMedia('print') failing in Firefox and IE

Question

I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses close in the print window. It works fine in Chrome but is failing in firefox and IE.

<input type="button" onclick="launchPrint()" value= "Print me" />


function launchPrint(){
$(".print-box").hide();
window.print();
}

(function() {
    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (!mql.matches) {
                $(".print-box").show();
            }
        });
    }
}());

Any suggestions what I may be missing?

score 1 · Answer 1 · answered Sep 23 '16 at 13:49

Unfortunately, I am on the same problem as you and I did some research. For now it seems that the bug exists on recents version of FF and IE still and it hasn't been fixed.

You can check out this bug for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=774398

I found another person having the same issue as us and it hasn't a really satisfying answer: https://social.technet.microsoft.com/Forums/office/en-US/bc3ca05e-b4ef-425b-8bbd-d3f700a8c85e/windowmatchmedia-not-firing-for-print-in-ie?forum=ieitprocurrentver

If I ever come accross any solution, I will edit this.

I mostly use the same code as you as exemple for highchart to resize before printing:

function printUpdate() {
    jQuery.each(Highcharts.charts, function(index, value){
        value.reflow();
    });
};
var mediaQueryList = window.matchMedia('print');
if(navigator.appVersion.indexOf("MSIE 8.")!==-1)//For IE8
{
    document.attachEvent(function (mql){printUpdate();}, mediaQueryList);
}
else
{
    if (window.matchMedia) {
        mediaQueryList.addListener(function (mql) {
            if (mql.matches)
            {
                printUpdate();
            }
        });
    }
}

window.onbeforeprint = printUpdate;

This work fine in chrome. But FF and IE11 won't fire the event.

@clever_bassi it should be the accepted answer: this bug still exists in 2021... I haven't found any palliative, in the case where you listen for this event to trigger JS element resize. — Eric Burel, Sep 02 '21 at 08:50

score 1 · Answer 2 · answered Nov 25 '16 at 14:57

1

You might want to look at the onafterprint event. At least this is triggered by Firefox and IE, so with a potential guard (to make sure the event did not fire multiple times) for your use case you can listen to both the matchMedia("print") and the onafterprint event.

answered Nov 25 '16 at 14:57

timbru31

365
2
21

Be careful that they are not equivalent: - beforeprint is called BEFORE the media query is applied to your page (basically your page is not yet "resized" for printing) - afterprint is called AFTER you print/cancel print - the media query change happens in between => that's what you want eg to trigger a "resize" event and force JS to reflow before printing, the other events won't work – Eric Burel Sep 02 '21 at 08:35

window.matchMedia('print') failing in Firefox and IE

2 Answers2

Linked