JS#1. 웹페이지의 특정 부분만 인쇄하고 싶을 때

Javascript 웹페이지 부분인쇄

 

웹페이지에 인쇄 기능을 넣고 싶은데,

인쇄 결과물에는 전체가 아니라, 특정 부분만 나오게 하고 싶을 때가 있습니다.

웹서핑을 하다보면 이런 기능이 구현된 곳이 종종 보이지요.

 

두 가지 방법이 있어 소개합니다. 

 

 

 

[첫 번째 방법]

 

같은 기능을 구현한 소스이더라도, 아이디어에 따라 다양하게 활용할 수도 있습니다.

예를 들어, 인쇄 후에는 인쇄 버튼 같은 특정 영역을 안보이게 하고 싶다거나.. 할 때,

아래 첫 번째 예시의 afterPrint() 함수 안에 원하는 코드를 작성하면 될 것입니다. 

 

var prtContent; // 프린트 하고 싶은 영역
var initBody;  // body 내용 원본

// 프린트하고 싶은 영역의 id 값을 통해 출력 시작
function startPrint (div_id) {
	prtContent = document.getElementById(div_id);
	window.onbeforeprint = beforePrint;
	window.onafterprint = afterPrint;
	window.print();
}

// 웹페이지 body 내용을 프린트하고 싶은 내용으로 교체
function beforePrint(){
	initBody = document.body.innerHTML;
	document.body.innerHTML = prtContent.innerHTML;
}

// 프린트 후, 웹페이지 body 복구
function afterPrint(){
	document.body.innerHTML = initBody;
}

<button onclick="startPrint('your div id');">print</button>

출처 : http://erunjoy.com/entry/JavaScript-%EC%9B%90%ED%95%98%EB%8A%94-%EB%B6%80%EB%B6%84-%ED%94%84%EB%A6%B0%ED%84%B0-%ED%95%98%EA%B8%B0-print

 

 

 

 

[두 번째 방법]

 

상황에 따라 다르겠지만, 이 방법도 꽤나 깔끔하네요.

예전에 구글링을 통해 구한 코드인데, 포스팅하려고 원본을 찾으려니 잘 안보이네요. 

댓글 달아주시면, 출처 표기하겠습니다~

 

var prtCtnt = document.getElementById("your div id");
var prtOption = 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0';
var WinPrint = window.open('', '', prtOption);
WinPrint.document.write(prtCtnt.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

출처 : https://stackoverflow.com/questions/12997123/print-specific-part-of-webpage

 

 

배워서 남주자, 를 실천중입니다