javascript window.print() 이전/이후 시점 알기

window.print()를 이용하여 웹사이트 프린트 할때, 프린트 이전과 이후 시점을 알아내야 할 경우가 있습니다.

브라우져 호환성을 고려해야겠지만 아래와 같은 방법으로 이벤트를 캐치 할 수 있습니다.

1. onbeforeprint 및 onafterprint 이벤트 핸들러

프린터가 요청될때, 그리고 끝날때 Internet Explore와 Firefox(Ver.6+)는 onbefreprint, onafterprint 이벤트를 발생합니다.

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

JavaScript

window.onbeforeprint = function() {

    console.log('이 Function은 프린트 이전에 호출됩니다.');

};

window.onafterprint = function() {

    console.log('이 Function은 프린트 이후에 호출됩니다.');

};

2. window.matchMedia

하지만 Chrome, Opera는 위와 같은 onbeforeprint 및 onafterprint를 이용한 처리가 불가능합니다.

하지만, window.matchMedia(‘print’)를 이용하여 이벤트 식별이 가능합니다.

JavaScript

if (window.matchMedia) {

        var mediaQueryList = window.matchMedia('print');

        mediaQueryList.addListener(function(mql) {

            if (mql.matches) {

                 console.log('이 Function은 프린트 이전에 호출됩니다.');

            } else {

                 console.log('이 Function은 프린트 이후에 호출됩니다.');

            }

        });

    }

matchMedia는 자바스크립트를 이용하여 CSS에 접근 하고, 미디어쿼리스트링의 일치 여부를 반환하는 기능을 제공하며,

자세한 설명은 MDN API 사이트를 참고 하시면 되시겠습니다.