테스트 사이트 - 개발 중인 베타 버전입니다

window.print() div 를 이용한 부분인쇄

· 18년 전 · 6088
보통 print 함수 사용시 원하지 않는 부분이 출력되는데 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>
<p><font size="2"><b>아래 선택 상자에서 원하는 인쇄 영역을 선택한 다음 "특정 부분 인쇄" 버튼을 클릭하세요!</b></font></p>
<FORM>
<SELECT NAME="divSelect">
<OPTION value="d1">첫 번째 영역만 인쇄
<OPTION value="d2">두 번째 영역만 인쇄
<OPTION value="d3">세 번째 영역만 인쇄
</SELECT>
<INPUT TYPE="button"
       ONCLICK="var s = this.form.divSelect;
                var divID = s.options[s.selectedIndex].value;
                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>
</DIV></BODY>
</HTML>
 
네이버 지식인 에서 발취 저작권 문제시 삭제 하겠습니다.
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
12333
12332
12331
12329
12328
12327
12326
12325
12324
12323
12322
12321
12320
12319
12318
12317
12316
12315
12314
12313
12312
12311
12310
12309
12308