웹 페이지가 상당히 길 때 사용자로 하여금 특정 부분만 인쇄할 수 있는 인터페이스를
제공해 주고 싶은 경우들이 종종 있다.
하지만 일반 브라우저는 페이지의 특정 부분만을 인쇄할 수 있는 메쏘드를 제공하고 있지 않다.
물론, 브라우저의 인쇄 대화 상자에서 일부 페이지를 인쇄할 수 있기는 하지만 우리가 원하는 것은
그런 기능이 아니다.
백문이 불여일견! 아래 있는 "소스실행하기"버튼을 클릭한 후 나타난 화면에서 원하는 인쇄 영역을
선택한 다음 "특정 부분 인쇄" 버튼을 클릭해 보기 바란다.
<DIV> 태그를 잘 이용하면 특정 DIV 영역만 인쇄할 수가 있다.
인터넷 익스플로러는 window.onbeforeprint와 window.onafterprint 이벤트 핸들러를 지원하는데,
이들은 인쇄 전과 후의 웹 페이지 내용을 변경할 수 있도록 도와준다.
이 기능을 이용하여 특정 DIV 영역은 보이게 하고 나머지 영역은 숨길 수가 있다.
(불행히 넷스케이프는 이 이벤트 핸들러를 지원하지 않는다. 하지만 여기서는 약간의 제약이 있긴
하지만 넷스케이프에서도 약간의 보이기 속성을 조절하여 비슷하게 구현해 보기로 한다.)
<HTML>
<HEAD>
<STYLE>
DIV {
position: relative; }
</STYLE>
<SCRIPT>
var
div2print;
function printDiv (id) {
if (document.all &&
window.print) {
div2print =
document.all[id];
window.onbeforeprint =
hideDivs;
window.onafterprint =
showDivs;
window.print();
}
else if
(document.layers) {
div2print =
document[id];
hideDivs();
window.print();
}
}
function hideDivs () {
if
(document.all) {
var divs =
document.all.tags('DIV');
for (var d = 0; d <
divs.length; d++)
if (divs[d] !=
div2print)
divs[d].style.display =
'none';
}
else if (document.layers) {
for (var l = 0; l < document.layers.length;
l++)
if (document.layers[l] !=
div2print)
document.layers[l].visibility = 'hide';
}
}
function showDivs () {
var divs =
document.all.tags('DIV');
for (var d = 0; d < divs.length;
d++)
divs[d].style.display =
'block';
}
</SCRIPT>
</HEAD>
<BODY>
<DIV>
<FORM>
<SELECT
NAME="divSelect">
<OPTION>첫 번째 영역만 인쇄
<OPTION>두 번째 영역만
인쇄
<OPTION>세 번째 영역만 인쇄
</SELECT>
<INPUT
TYPE="button"
xxxxONCLICK="var s =
this.form.divSelect;
var divID =
s.options[s.selectedIndex].text;
printDiv(divID);"
VALUE="특정 부분
인쇄"
>
</FORM>
</DIV>
<DIV
ID="d1">
<b>[첫 번째 영역]</b><br>
첫 번째
영역입니다!<br><br>
</DIV>
<DIV ID="d2">
<b>[두
번째 영역]</b><br>
두 번째 영역입니다!<br>
두 번째 영역을 선택하여 인쇄해
보세요!<br><br>
</DIV>
<DIV ID="d3">
<b>[세
번째 영역]</b><br>
세 번째 영역입니다!<br>
세 번째 영역을 선택하여 인쇄해
보세요!<br>
From
코리아인터넷닷컴
</DIV>
</BODY>
</HTML>
'IT_Programming > JavaScript' 카테고리의 다른 글
| [스크랩] 텍스트박스에 숫자 및 콤마 입력 가능하게하는 이벤트 핸들러 함수 (0) | 2006.10.16 |
|---|---|
| [스크랩] 텍스트박스에 숫자 및 콜론 입력 가능하게하는 이벤트 핸들러 함수 (0) | 2006.10.16 |
| [스크랩] 이미지 드래그해서 이동시키기 (0) | 2006.08.02 |
| [스크랩] 스크롤바 추가하기 (0) | 2006.06.02 |
| 자바스크립트 오류(document.all) - 개체가 없습니다 (0) | 2006.05.24 |