현재 페이지 지정 영역 프린트하기

 

해당 글은 프린트할 수 있는 기본적인 방법에 대해서만 정리했습니다.

 

html, 스크립트 부분은 이렇게 적용하면 되며, 아래 예제를 직접 적용해보면 바로 이해가 될겁니다.

※ 각각 프리트 할 때 경우의 수들이 있어서 그런 그때그때 변형해야 할 거 같습니다~!

<style>
@page {
	/*프린트 시 상하단 머리말, 주소 지우기*/
	size: auto; /* auto is the initial value */
	margin: 0mm; /* this affects the margin in the printer settings */
}

@media print{
	/*프린트 작동 시 적용되는 css 영역이라고 생각하면 되고, 더 자세한 정보는 검색해보시길 바랍니다.*/
}
</style>

<div id="print">프린트되는 영역</div>
<button type="button" onClick="printPage();">프린트하기</button>


<script type="text/javascript">
function printPage(){
    var initBody;
    window.onbeforeprint = function(){
        //프린트하기 버튼 클릭 시 발생
        initBody = document.body.innerHTML;
        document.body.innerHTML = document.getElementById('print').innerHTML;
    };

    window.onafterprint = function(){
        //프린트 미리보기 창에서 프린트/취소 버튼 클릭 시(결과적으로는 프린트 완료라고 가정) 발생
        document.body.innerHTML = initBody;
    };

    window.print();
    
    return false;
}
</script>