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

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

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

 

1. onbeforeprint 및 onafterprint 이벤트 핸들러

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

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

 

2. window.matchMedia

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

 

3. Cross Browser compatibility

위에 설명드린 방법을 통하여 브라우져 호환성을 위한 코드 작성이 가능합니다.

실제 수행되어야할 코드는 beforePrint, afterPrint Function에 작성하면 됩니다.

실행결과는 아래와 같습니다

345435

이상 포스팅을 마치겠습니다.

참고 : http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

You may also like...

  • 멍까미

    와.. 검색하다 잘 보고 갑니다. 크롬에서 window.onbeforeprint가 안먹어서 생각중이었는데. 좋은 방법이 있었네요.