window.print() 호출 이전/이후 이벤트 처리

1. onbeforeprint, onafterprint 이벤트 핸들러

프린트가 요청될 때 IE와 Edge 그리고 Firefox(> 5)에서는 onbeforeprint, onafterprint 이벤트를 발생시킵니다.

이 이벤트를 처리할 이벤트 핸들러를 구현하여 프린트 전/후에 대한 처리를 할 수 있습니다.

window.onbeforeprint = function() {
    console.log('프린트 전 호출');
};
window.onafterprint = function() {
    console.log('프린트 후 호출');
};

IE와 Edge 그리고 Firefox에서는 onbeforeprint와 onafterprint 이벤트 핸들러를 이용하면 되지만 크롬과 사파리, 오페라등 타 브라우저에선 이 이벤트 핸들러를 지원하지 않습니다. 타 브라우저에서 onbeforeprint, onafterprint와 같은 기능을 구현하기 위해서는 window.matchMedia를 사용하면 됩니다.

window.matchMedia는 IE(>9)버전을 포함한 모든 브라우저를 지원합니다.

2. window.matchMedia

if (window.matchMedia) {
    var mQuery = window.matchMedia('print');
    mQuery.addListener(function(mql) {
        if (mql.matches) {
            console.log('프린트 전 호출');
        }
else {
    console.log('프린트 후 호출');
}
});
}

window.matchMedia은 자바스크립트를 이용해 CSS에 접근하여 미디어쿼리의 일치 여부를 반환하는 기능을 하며

자세한 설명은 MDN API문서를 참조 바랍니다.

3. Cross Browser

var beforePrint = function() {
    console.log('프린트 전 호출');
};
var afterPrint = function() {
    console.log('프린트 후 호출');
};

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

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;