div 지정영역만 Print(프린트)하기

출처 : http://blog.naver.com/syungisyungi?Redirect=Log&logNo=150078767995

div 지정영역만 Print(프린트)하기

 

화면에서 많은 내용이 담긴 페이지를 작업할 때

그냥 프린트하면 화면전체가 프린트돼 제대로 나오지 않는 경우가 많지요?

 

그럴때에는 내용이 들어간 부분만 프린트할 수 있는 이 스크립트를 써봅시다!

 

step.01

 

먼저 프린트 되길 원하는 영역을 div로 묶어줍니다.

 

<div id="box">

프린트 되야하는 영역

</div>

 

 

step.02

 

인쇄하기 버튼을 따로만들어 링크를 걸어줍니다.

 

<a href="#" onclick="printArea()">인쇄하기</a>

 

 

step.03

 

그리고 이 자바스크립트를 맨 밑에 넣어줍니다.

 

<script type="text/javascript">
<!--
var initBody;

function beforePrint() {
 boxes = document.body.innerHTML;
 document.body.innerHTML = box.innerHTML;
}
function afterPrint() { 
 document.body.innerHTML = boxes;
}
function printArea() {
 window.print();
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

-->
</script>