LUCAEL's Technical Blog: 인쇄

2009년 7월 21일 화요일

[스타일시트] 특정영역 인쇄하기

특정영역 인쇄하는 것을 자바스크립트로 하다가 먼가 깔끔하지 못한거 같아서 새로운 방법을 찾던중
이번에는 CSS (스타일시트) 로 인쇄영역을 구분하는 방법에 대해 할게 되었다.

이 방법은 media에 따라 스타일을 다르게 주는 방법으로,
이를 이용하면 화면에 보이는 스타일과 인쇄되는 스타일을 다르게 설정할 수 있다.

즉, 단순히 보이지 않는 것을 떠나서 색을 바꾼다던지 배경그림을 넣는 것, 폰트를 변경하는 것도 가능하다.

항상 장점이 있으면, 단점도 있는 법!!
이런 장점만큼이나 안타까운 단점이 있다.

자바스크립트로 구현할 때는 내가 인쇄하기를 원하는 부분만을 묶으면 되지만,
이는 반대로 인쇄를 하지 않을 부분을 묶어야 한다는 것이다.
이 방법이 때로는 장점이 될수도 있는 것이지만, 특정 페이지에서만 인쇄를 하고 홈페이지를 노프레임형태로 Server Side Include (PHP, ASP, Apache 등 서버단에서 Include 하는 것)을 사용한다면 변경해야될 파일이 많아진다.

하지만 모든 페이지에서 인쇄를 해야하고, 항상 특정부분을 제외해야 한다면 장점도 될수 있을 것이다.

이를 사용하는 방법은 아주 간단하다.
핵심코드는 아래 몇줄안되는 코드가 전부다.

<style type="text/css" media="print"> .noprint { display:none; } </style> <style type="text/css" media="screen"> .onlyprint { display:none; } </style>

이렇게 media="print"를 하면 인쇄할 때만 적용되고, media="screen"은 화면에 출력할 때만 적용이 된다.
위의 코드는 class="noprint" 가 지정되어 있는 영역은 프린트가 되지 않게 만들고,
반대로 class="onlyprint"가 지정되어 있는 영역은 화면에 출력되지 않게 한다.

그렇게 어려운 내용이 아니므로 아래 예제를 보면 충분히 이해할 수 있을 것이다.

예제보기

출처 - http://realmind.tistory.com/198 BSH님 블로그 펌

2009년 6월 30일 화요일

[자바스크립트] 자바스크립트를 이용한 웹페이지 웹문서 인쇄하기

홈페이지를 제작하다가 특정영역을 인쇄하는 기능이 필요해서 나름대로 검색도 하고,
수정도 좀 하다가 보니 보통은 많은 인쇄기능을 PHP나 ASP와 같은 Server Script Language로 많이 연동해서 구현하고 있었다.

이런 Server Script Language를 써서 하는 방법이 그리 어려운 것은 아니지만,
이를 사용하지 않고 간단하게 하는 방법을 원했기 때문에 자료가 별로 없었고, 그래서 공유할만한 가치가 있다고 판단했다.

내가 알고 있는 방법을 정리하자면,
자바스크립트로 할 수 있는 방법은 아래와 같이 2가지가 있다.

1. 인쇄하는 동안만 웹사이트를 변형하여 특정내용만 남기는 방법.

이 방법의 경우 새창을 띄우지 않아도 되기 때문에 사용하기는 편하다는 장점이 있는 반면, 일시적으로 웹사이트가 변형될 수 있다.
특히나 포탈같이 웹사이트의 소스가 긴 경우 이를 소화하지 못하여 웹사이트가 자동복구 되지 않고 새로고침을 해야 할 수도 있다. 직접 간단한 테스트를 해봤을 경우는 정상작동하였으나, 소스가 길어지자 변형된 웹사이트가 자동복구되지 않는 현상을 발견할 수 있었다.

- <head>에 들어갈 자바스크립트 영역

01
var initBody; 

02
function beforePrint() 

03
{  

04
   initBody = document.body.innerHTML;  

05
   document.body.innerHTML = print_page.innerHTML; 

06
}  

07
  
08
function afterPrint() 

09
{  

10
  document.body.innerHTML = initBody;  

11
}  

12
  
13
function pageprint() 

14
{ 

15
     window.onbeforeprint = beforePrint;  

16
     window.onafterprint = afterPrint;  

17
     window.print();  

18
}

- <body>에 들어갈 영역지정 방법

1
<div id='print_page'> 

2
인쇄내용 

3
</div>

- 인쇄버튼

`1`	`<input` `type='button'` `value=' 인 쇄 '` `onclick="pageprint()">`

2. 특정영역의 내용을 하나의 문서로 만들어서 새창으로 띄우는 방법.

이 방법은 특정영역을 지정해 놓고, 인쇄버튼을 눌렀을 때 새창으로 특정영역을 그대로 복사하는 방법이다.
새문서를 만들어서 저장하지 않고, 자바스크립트로 동적으로 인쇄할 영역을 만들어내기 때문에 따로 저장공간이 필요하지도 않을뿐더러 인쇄미리보기의 효과도 볼수 있다.

하지만, 새창을 띄우는 것을 싫어하는 유저도 많이 있기 때문에 그다지 추천하지는 않는다.

- <head>에 들어갈 자바스크립트 영역

01
function pagePrint(Obj) {  

02
    var W = Obj.offsetWidth;        //screen.availWidth;  

03
    var H = Obj.offsetHeight;       //screen.availHeight; 

04
  
05
    var features = "menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes,width=" + W + ",height=" + H + ",left=0,top=0";  

06
    var PrintPage = window.open("about:blank",Obj.id,features);  

07
  
08
    PrintPage.document.open();  

09
    PrintPage.document.write("<html><head><title></title><style type='text/css'>body, tr, td, input, textarea { font-family:Tahoma; font-size:9pt; }</style>\n</head>\n<body>" + Obj.innerHTML + "\n</body></html>");  

10
    PrintPage.document.close();  

11
  
12
    PrintPage.document.title = document.domain;  

13
    PrintPage.print(PrintPage.location.reload());  

14
}

- <body>에 들어갈 영역지정 방법

1
<div id='print_page'> 

2
인쇄내용 

3
</div>

- 인쇄버튼

`1`	`<input` `type='button'` `value=' 인 쇄 '` `onclick="pagePrint(document.getElementById('print_page'))">`

출처 : bsh님 티스토리 블로그 http://realmind.tistory.com/197