김형원입니다 Manuz.Com :: 웹상에서 페이지 인쇄 기능 스크립트

JavaScript 를 이용해서 특정 페이지의 컨텐츠 부분만을 인쇄하는 기능을 만들게 되었다.
새창을 띄워서 하는 방법만을 고수해오다 새창을 띄우지 않고 현재 페이지의 내용만을 인쇄 하고 싶어서 한번 만들어 보았는데 너무 복잡해져버린 것 같다 ㅎ

CSS 에서 Print 기능을 사용하여 하는 방법도 있긴 하지만 스크립트로 해보고자. -_-;;
스크립트로 구현해보았다. 해보고나서 드는 생각은 CSS 로 하는 것이 가장 좋은것 같다는 생각이다.
아주 간단하게 구현이 가능하리라 본다. (CSS 로 한다면..)

새로 개편된 함평군청 홈페이지에 제작한 스크립트를 적용해보았는데 나름 잘 되는 것 같다.
브라우저 호환성은 IE6 과 IE7 에 두었다.

우측의 이미지는 현재 함평군청 홈페이지의 모습이다. 빨간색으로 되어있는 부분만 인쇄하고자 만들게 된 스크립트 이다. 원래 CSS 로 하게되면 Header와 Footer SideBar 부분을 display:none 속성을 주어서 해결하면 된다. 그리고 위와 같이 선언한 내용을

이렇게 불러서 사용하게 되면 프린트 할때만 사용하게 된다. 파일을 따로 분리하고 싶지 않다면 @media print { } 안에 넣어서 사용할 수도 있다. 파일의 갯수가 많아지게 되면 request count 가 너무 많아져서 홈페이지가 느려지게 되는 경향이 있으므로 합치는 것도 좋은 방법이 되리라 본다.

각설하고 내가 생각한 방법에 대해서 적어본다.

사용자에게 보이지 않는 숨겨진 IFRAME 을 생성한다.
프린트 버튼을 클릭하게 되면 프린트 영역으로 설정된 곳의 내용을 모두 읽어서 IFRAME 으로 밀어넣는다
숨겨져 있는 IFRAME 만을 인쇄한다.

위 방법으로 진행하던중 몇가지 문제 점이 발생했다

첫번째 IFRAME 을 숨기면서 사용했던 Display:none 속성때문에 접근에 권한 문제가 발생한다는 것
Inline 으로 작성한 스타일이 아닌 <link 로 스타일을 선언한 경우 디자인이 전혀 없는 상태로 인쇄되는 것
숨겨진 IFRAME 으로 내용을 보낼 때 개체를 찾지 못하는 경우가 있다는 것
숨겨진 IFRAME 안에 내용을 집어넣을때 읽어오지 못하는 경우가 있다는 것
IE6 과 IE7 간의 인쇄된 사이즈가 틀리게 보인다는 것

위에 발생한 문제점들을 모두 해결한후에 나온 소스가 아래에 있다.

 /* 페이지 인쇄 기능 (개발 : 김형원 2009.04.13) */
function lf_printIframe() {
	if (document.getElementById("PrintAreaDiv") != null) {
		var sHTML = document.getElementById("PrintAreaDiv").innerHTML;
	} else {
		window.print();
		return;
	}
	var linkCount = document.getElementsByTagName("link").length;
	var styleLink;
	for(i=0;i < linkCount;i++) {
		styleLink = hiddenFrame.document.createElement('link');
		styleLink.type = "text/css";
		styleLink.rel = "stylesheet";
		styleLink.href = document.getElementsByTagName("link")[i].href;
		hiddenFrame.document.appendChild(styleLink);
	}
	hiddenFrame.location.href="/_modules/print/printPage.php";
	var Div = hiddenFrame.document.createElement('div');
	Div.style.width = "750px";
	Div.style.float = "left";
	Div.innerHTML = sHTML;
	if( navigator.appName.indexOf("Microsoft") > -1 ){
		if( navigator.appVersion.indexOf("MSIE 6") > -1){
			hiddenFrame.document.body.style.zoom='85%';
		}else if(navigator.appVersion.indexOf("MSIE 7") > -1){
			Div.style.margin = "0 0 0 20px";
			hiddenFrame.document.body.style.zoom='120%';
		}
	}
	hiddenFrame.document.appendChild(Div);
	hiddenFrame.focus();
	hiddenFrame.print();
}

printPage.php 의 소스는 아래와 같다.








 

페이지 인쇄

그리고 프린트할 페이지의 상단에

위의 내용만 넣어주고 프린트하기 위한 버튼에 lf_printIframe 함수만 호출해주면 잘 동작한다.

다 하고나서 드는 생각은 내가 삽질을 했구나 하는 생각뿐이다 그냥 CSS 로 할걸.. ㅋㅋ
그래도 한번 해봤으니 경험이다 라고 생각하고 넘어가련다.. ㅎㅎ

PS. 피드백 환영입니다. JS 나 HTML ,CSS 에 관해서는 이제 조금씩 배워가는 단계라서 ^^;;