[JSP & javascript] JSP 페이지 프린트 하기.
JSP페이지에서 현재 보이는 페이지를 프린트 할때 보통 window.print() 라는 자바스크립트 함수를 사용.
그러나 그냥 쓰면 말그대로 전체 페이지를 다 출력하기 때문에 조금의 수정이 필요함.
기본 개념만을 말하자면, 출력하고자 하는 부분을 <div> 태그로 묶은 후, innerHTML을 이용하여 <div>태그로 묶은 부분만 팝업창으로 띄운 후, 그 팝업창을 인쇄하는 것.
다음은 해당 예제.
1. 우선 출력하고자 하는 부분이 들어간 JSP 페이지.
<시작>
-------------------------------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>프린트 하기.</title>
<script type="text/javascript" src="/Exp_admin/js/print.js"></script>
<!-- 프린트를 위해 따로 나눠준 자바스크립트 파일 -->
</head>
<body>
<form>
<input type="button" value="프린트" OnClick="goPrint(MyPrint);" >
<!-- 프린트 버튼 -->
</form>
<table>
<tr>
<td>인생</td>
<td>뭐있냐</td>
<td>인생</td>
<td>뭐없다.</td>
</tr>
</table>
<div id="printarea">
<!-- 프린트 하기위한 영역 -->
<table width="850" cellspacing="1" border="0">
<!-- DB쿼리한 결과를 뿌려주는 테이블 -->
<tr >
<td >아이디</td>
<td >날짜</td>
<td >전화번호</td>
<td >주소</td>
</tr>
<% for(int i=0; i<totalrows; i++){
dto = (DTO) list.get(i);
%>
<tr>
<td ><%= dto.getid() %></td>
<td >
<%= dto.getdate().substring(0,4)%>
년
<%= dto.getdate().substring(4,6)%>
월
<%= dto.getdate().substring(6,8)%>
일
<%= dto.getdate().substring(8,10)%>
시
</td>
<td ><%= dto.getCall() %></td>
<td ><%= dto.getadd() %></td>
</tr>
<%
}
%>
</table>
</div>
</body>
</html>
-------------------------------------------------
<끝>
중요한 몇가지가 빠지긴 했지만 일단...
이상한 말이 써있는 테이블 하나와,
DB에서 값을 가져와 보여주는 테이블이 하나 있습니다.(그렇다고 합시다.)
여기서 DB의 데이터를 보여주는 2번째 테이블만 프린트 하려고 한다고 칩시다.
우선, 28줄과, 60줄처럼 <div>태그로 해당 부분을 묶어줍니다. (id는 아무렇게나 해도 됩니다)
그리고 페이지를 웹에 띄운 후 15줄에 만들어둔 프린트 버튼을 누룹니다.
그럼 원하는 페이지만 출력이 됩니다. 참쉽죠?
.............
정말 프린트를 하기위해 필요한 부분은, 9줄에서 추가시켜준 자바스크립트 파일 입니다.
2. 자바스크립트를 이용해 프린트 하기.
우선 소스를 보자면
<시작>
function goPrint(title){
var sw=screen.width;
var sh=screen.height;
var w=800;//팝업창 가로길이
var h=600;//세로길이
var xpos=(sw-w)/2; //화면에 띄울 위치
var ypos=(sh-h)/2; //중앙에 띄웁니다.
var pHeader="<html><head><link rel='stylesheet' type='text/css' href='/Exp_admin/css/print.css'><title>" + title + "</title></head><body>";
var pgetContent=document.getElementById("printarea").innerHTML + "<br>";
//innerHTML을 이용하여 Div로 묶어준 부분을 가져옵니다.
var pFooter="</body></html>";
pContent=pHeader + pgetContent + pFooter;
pWin=window.open("","print","width=" + w +",height="+ h +",top=" + ypos + ",left="+ xpos +",status=yes,scrollbars=yes"); //동적인 새창을 띄웁니다.
pWin.document.open(); //팝업창 오픈
pWin.document.write(pContent); //새롭게 만든 html소스를 씁니다.
pWin.document.close(); //클로즈
pWin.print(); //윈도우 인쇄 창 띄우고
pWin.close(); //인쇄가 되던가 취소가 되면 팝업창을 닫습니다.
}
<끝>
9~ 13 줄을 잘 보세요.
div태그로 묶었던 부분을 getElementById로 가져와서 하나의 새로운 페이지를 만듭니다.
그리고 그 팝업창을 띄워주고, 띄워진 팝업창을 인쇄하는 겁니다.
css파일등을 이용하여 자기 입맛에 맞게 꾸밀 수도 있습니다.(매우 귀찮지만요)
이 소스에서는, 팝업창의 크기를 800*600으로 띄워주었지만,
크기를 매우 작게 만들고 스크린에서 벗어난 부분에 띄워주도록 하면
사용자 입장에서는 그냥 자동으로 해당 부분만 출력해주는 것처럼 보이게 할 수 있습니다.
덧. 정말 고급스럽게 인쇄를 하기 위해선, 출력을 위한 상용툴을 이용해야 합니다.
굳이 그럴필요가없고 단순 출력만이 필요할땐 이정도 소스로도 충분할듯?
