[CSS, JAVASCRIPT] onafterprint, onbeforeprint, 미디어쿼리 디바이스 분기를 이용한 프린트 퍼블리싱

크롬에서 [Ctrl + P] 를 누르면 현재 열고 있는 웹페이지의

인쇄 미리보기 레이어가 나타나잖아요?

 

그렇지만 예시로 수료증/증명서인 경우

최종적으로 인쇄되어 나올 용지에 알맞는

HTML만 리렌더링 되어있어야 할 거예요

 

1. [Javascript] window.onafterprint , window.onbeforeprint

이런 경우를 대비하여 만들어진

자바스크립트의 두가지 메서드를 소개해 드릴게요!

 

window.onafterprint 와 window.onbeforeprint 에요.

 

말 그대로 인쇄 미리보기 (앞서설명한 Ctrl+P 할때나오는 브라우저의 인쇄 미리보기 레이어) 직전에 호출할 함수를 넣을 수 있고 인쇄 직후에 호출할 함수를 넣을 수 있어요.

 

    window.onload = function() {
        window.onafterprint = afterPrint;
        window.onbeforeprint = beforePrint;
        let certificateDoc;
    }; // doc.ready

    //프린트 미리보기 실행되기 직전
    function beforePrint() {
        let printSection = document.getElementById('printSection').innerHTML;
        certificateDoc = document.body.innerHTML; // 원본 바디를 전역변수에 저장
        document.body.innerHTML = printSection; // 바디를 인쇄영역만으로 갈아치우기
    };

    //프린트 미리보기 꺼진 후
    function afterPrint() {
        document.body.innerHTML = certificateDoc; // 바디를 원본으로 다시 교체
    };

 

위 코드를 살펴볼까요?

 

document가 모두 준비되면 온애프터프린트와 온비포프린트에 제가 밑에 만든 함수가 껴 넣어졌습니다.

만든 함수(beforePrint, aterPrint)는 주석으로 설명하였으니 천천히 이해해주세요!

 

아 물론 [Ctrl + P]를 직접 눌러서 인쇄하는 경우는 거의 없으니

프린트하는 버튼을 따로 만들어주셔야합니다.

<!-- 인쇄버튼 -->
<button type="button" onclick="window.print();">인쇄하기</button>

 

그럼 프린트인 경우에 원하는 HTML만 리렌더링된건데요,

CSS도 분기하여 스타일링할 수 있도록 하는 방법을 알아볼게요.

 

2. [CSS] media screen과 print

아래 두개의 코드 블럭을 봐주세요

css 사용하시면서 미디어 쿼리를 들어 보셨죠?

max-width: 767px 같은 가로폭에 따른 스타일링 분기였는데

이번엔 디바이스에 따른 스타일링 분기에요

 

/* (1) 브라우저의 경우 */
@media only screen {
    .cert_title {
    	color: red;
    }
}

위의 경우 브라우저에선(일반적 상태) .cert_title은 빨간 글씨로 나타날꺼에요.

 

/* (2) 프린트의 경우 */
@media only print {
    .cert_title {
    	color: blue;
    }
}

window.onafterprintㅇ

하지만 위 경우처럼 디바이스가 프린트인 경우 (=[Ctrl + P]를 누른 경우)

.cert_title 은 파란 글씨로 변할꺼에요.

 

이정도면 자유롭게 퍼블리싱하실 수 있겠죠?

추가로 알려드릴게 하나 더 있는데요

수료증/증명서가 세로인 경우도 있지만 가로로 긴 경우도 있잖아요

 

    <style>
        @page {
            size: A4 landscape; margin: 0;
        }
    </style>

위 스타일이 읽은 모든페이지에선

프린트 미리보기시

A4용지며, landscape(가로로 길다) 라는 선언을 따르는 것이에요

 

 

3. 결론

그럼 모두 즐 퍼블하세요~