부분만 인쇄하기

먼저 각 이벤트가 발생하는 시점을 보면....
onbeforeprint : 관련된 문서를 인쇄하거나 인쇄 미리보기하기 바로전에 발생
onafterprint : 관련된 문서를 인쇄하거나 인쇄 미리보기한 후 즉시 발생
이와 같습니다.

작동은
우선 beforePrint() 함수를 보면..

    function beforePrint(){
        // initBody라는 변수에 현제 페이지의 body태그 안에 있는 모든 HTML 소스를 저장하고
        initBody = document.body.innerHTML;
        // 현제 페이지의 body태그 안에 내용을 <div id = pnt_dv></div> 안에 있는 HTML 소스들로 대체합니다.
        document.body.innerHTML = pnt_dv.innerHTML;
    }

이상태에서 인쇄나 인쇄 미리보기를 실시하여 <div id = pnt_dv></div> 안에 있는 HTML 소스에 대해서 인쇄가 되고 인쇄를 마치면 afterPrint() 함수를 실행하죠

    function afterPrint(){
        // 다시 문서의 body태그 안에 내용을 앞에서 저장해둔 기존의 HTML소스(initBody)로 되돌려 놓습니다.
        document.body.innerHTML = initBody;
    }

 

 

실제 적용해 보면 --------

 

<script language='javascript'>
var initBody
function beforePrint(){ 
 initBody = document.body.innerHTML; 
 document.body.innerHTML = pnt_dv.innerHTML;
}
function afterPrint(){ 
 document.body.innerHTML = initBody;
}

function printArea() {
 window.print();
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>

<div id='pnt_dv'>

인쇄될 내용

</div>