웹사이트 출력 이벤트 잡아서 처리하기, 특정 DIV 내용만 출력하기 ... 웹페이지 인쇄이벤트, 출력이벤트, 웹사이트 프린트이벤트

화면에 보이는거와 달리 내 맘대로 출력을 변환한다?

 

화면에 보여지는 웹사이트의 내용을 출력하기위해서 사용자가 인쇄버튼을 클릭한 경우에, 특정한 처리를 해야할 필요가 있는 경우가 있습니다. 사용자는 화면에 보이는 내용을 출력하기위해 인쇄버튼을 클릭했지만, 화면 그대로 출력하게 되면 대부분 한 페이지를 벗어나거나 프레임간의 간섭등의 오류가 생기기 쉽습니다. 

 

웹사이트프린트 프린트이벤트 인쇄이벤트 웹페이지인쇄

 

 

그래서, 사용자가 인쇄버튼을 클릭했을때, 특정 프레임 또는 특정 DIV 의 내용만 출력하고 싶거나, 인쇄될 내용을 특정 형식에 맞게 변환하고 싶은경우에 사용할 수 있는 이벤트가 있습니다. 

 

출력이벤트 프린트이벤트 웹페이지인쇄

 

 

 

이벤트 발생시 화면내용을 특정 DIV 내용으로 변환하여 출력시키기

 

위와 같이 onbeforeprint 이벤트를 사용하면 사용자가 출력을 시도할때 이벤트를 잡아낼 수 있습니다. 위와 같이 body 태그에서 이벤트를 잡아도 되고 아래와 같이, 임의로 만든 인쇄버튼을 클릭하면 실행되도록 함수를 만들수도 있습니다

 

<script>
function content_print(){    
    var initBody = document.body.innerHTML;
    window.onbeforeprint = function(){

        document.body.innerHTML = document.getElementById('content').innerHTML;
    }
  
    window.onafterprint = function(){

        document.body.innerHTML = initBody;
    }

    window.print();     
}     

</script>

 

 

위의 함수는 , 인쇄이벤트를 잡아서 실제 화면에 보여지는 body.innerHTML 대신에, content 라는 ID 를 가진 엘리먼트내의 값을 대신 출력하게 해주는 함수입니다.