/////////////// Source(html) ///////////////
<html>
<head>
<title>화면 부분 인쇄</title>
<SCRIPT LANGUAGE=JScript src="../js/div_print.js"></SCRIPT>
</head>
<body>
<h2> Top </h2>
<!--------------부분인쇄 Div 시작------------------>
<div id="pDiv" align="center">
<h2> Middle </h2>
</div>
<!--------------부분인쇄 Div 끝------------------>
<h2> Bottom </h2>
</body>
</html>
/////////////// Source(div_print.js) ///////////////
var tempHtmlContent;
function printDiv () {
if (document.all && window.print) {
window.onbeforeprint = beforeDivs;
window.onafterprint = afterDivs;
window.print();
}
}
function beforeDivs () {
if (document.all) {
var rng = document.body.createTextRange( );
if (rng!=null) {
//alert(rng.htmlText);
tempHtmlContent = rng.htmlText;
rng.pasteHTML("<table border=0 align=center><tr><td align=center>"
+ document.all("pDiv").innerHTML + "</td></tr></table>");
}
}
}
function afterDivs () {
if (document.all) {
var rng = document.body.createTextRange( );
if (rng!=null) {
rng.pasteHTML(tempHtmlContent);
}
}
}
특별히 설명이 필요 없는 소스 인줄 압니다만, 여기저기 뒤져서 알아낸 것들과 조금의 제 짱구의
굴러가는 노력이 있어서, 몇자 적습니다. ㅎㅎ
우선 window.print 수행전과 수행후에 각각 onbeforeprint 와 onafterprint 이벤트가 발생하게 됨에 착안하여서 onbeforeprint 가 발생하면 페이지 body 에 있는 모든 html 소스를 임시 저장한후 출력을 원하는 부분(pDiv 부분)의 html 소스와 바꿉니다.
그 후 원하는 부분의 출력이 끝나면, onafterprint 이벤트가 발생하게 되는 데 이때, 임시 저장해두었던 원래 body 소스를 다시 설정해 주면 됩니다.
댓글 없음:
댓글 쓰기