[JavaScript] 프린트 실행(window.print()) 및 프린트 실행 이전/이후

script로 프린트를 실행하고 싶다면 아주 간단하게

 

window.print() 를 실행만 하면 (ctrl + p) 와 동일하게 작동한다.

 

print()를 사용하게 되면 자동적으로 필요한게 원하는 부분만 인쇄하는것이다.

 

애초에 인쇄 기능 자체가 화면에 보이는 모든 영역을 인쇄하기때문에 사실상 불가능하지만

 

조금 후작업을 하여 프린트 실행 시점에 따라 필요없는 부분은 숨기고 필요한 영역을 확대하거나 하여

 

원하는 영역만 인쇄하도록 처리할 수 있다.

 

프린트 실행 이전/이후 시점을 알 수 있는 두가지 방법에 대해 알아보자.

 

1. window.onafterprint / window.onbeforeprint

 

  

window.onbeforeprint = function () { 

    console.log("onbeforeprint : 프린트 이전에 실행");

}

 

window.onafterprint = function () { 

    console.log("onafterprint : 프린트 이후에 실행");

}

 

참고 : javascript mdn : window.onafterprint , window.onbeforeprint

 

2. window.matchMedia

출처 : Dev Stroy...

 

if (window.matchMedia) {

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

    mediaQueryList.addListener(function(mql) {

        if (mql.matches) {

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

        } else {

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

        }

    });

}

 

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

 

 

출처: https://mine-it-record.tistory.com/383 [나만의 기록들]