[JavaScript] window.print() - 프린트 실행 및 프린트 실행 이전/이후 시점 제어하기

스크립트에는 window.print() 라는 메서드가 존재하는데,

ctrl + p 와 동일한 기능을 제공하는 프린트 기능이다.

 

▷ 구문

window.print()

 

사실 프린트 기능만을 정리하자면 제목에 있는것처럼 window.print()만 있으면 가능하지만 당연하게도 개발을 진행하게되면 여러 상황에 직면하게 되는데

 

이때 유용하게 도와줄 수 있는 프린트 실행 이전/이후 시점의 처리를 도와줄 방법에 대해서도 알아보자.

 

▷ 예제1) window.onafterprint / window.onbeforeprint

window.onbeforeprint = function () { 
    console.log("onbeforeprint : 프린트 이전에 실행");
}

window.onafterprint = function () { 
    console.log("onafterprint : 프린트 이후에 실행");
}

 

윈도우 이벤트 핸들러 중 onbeforeprint 와 onafterprint를 이용하는 것인데, 말 그대로 프린트 이전/이후 시점을 캐치해 제어가 가능하다.

 

▷ 예제2) window.mathMedia

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
             console.log('프린트 이전에 호출됩니다.');
        } else {
             console.log('프린트 이후에 호출됩니다.');
        }
    });
}

 

 

window.matchMeida() 메서드는 주어진 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList를 반환하는데, 예제에 나와 있는것 처럼 mathes를 사용하여 시점을 캐치하는것인데

 

이 메서드는 프린트 시점뿐만 아니라 다양하게 사용이 가능하다.

참조 : https://developer.mozilla.org/ko/docs/Web/API/Window/matchMedia

Window.matchMedia() - Web API | MDN