본문 바로가기
Web/JSP/Servlet/JDBC

[JSP] html 테이블 내용 엑셀로 변환 /html Excel 추출 / 엑셀 다운로드 jsp

by 나비와꽃기린 2016. 9. 29.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

JSP에 그려져 있는 Table을 엑셀 문서로 추출하는 방법을 소개하고자 한다.

먼저, table이 그려져 있는 jsp 화면과 그 table을 excel로 변환시켜주는 화면이 필요하다.


1. excel.jsp

table이 그려져 있는 jsp가 있다. 

엑셀전환 버튼을 누르면 /sts/excelConvert에 매핑된 컨트롤러의 메소드를 부른다.

 $(document).ready(function(){
	 $("#excelConverBtn").on('click',function(){
		 location.href="/sts/excelConvert";
	 });
 });

<table>
	<thead>
		<tr><th>제품이름</th>
		<th>가격</th>
		<th>구매링크</th>
	</tr></thead>
	<tbody>
		<tr>
			<td>blouse</td>
			<td>1500000000</td>
			<td><a href="mailto:blouse@naver.com">blouse@naver.com</a></td>
		</tr>
		<tr>
			<td>Tshirt</td>
			<td>1000000000</td>
			<td><a href="mailto:Tshirt@naver.com">Tshirt@naver.com</a></td>
		</tr>
		<tr>
			<td>Jeans</td>
			<td>2500000000</td>
			<td><a href="mailto:Jeans@naver.com">Jeans@naver.com</a></td>
		</tr>
	</tbody>
</table>

<br>

<input type="button" name="excelConverBtn" id="excelConverBtn" value="엑셀전환" style="cursor:hand;"/>


2. Controller

필자는 data를 직접 하드코딩 해서 test 했지만..... =_=;

원래는 DB에서 table과 같은 Data를 select하여 가져오면 된다.

(너무 쉬운 내용이니 이하 생략한다..)


어쨌든, Data를 가져왔다 치고 ModelAndView 객체에 심어주고 화면을 전환한다.

@RequestMapping(value = "/excelConvert", method = RequestMethod.GET)
	public ModelAndView excelConvert(Locale locale, Model model) {
		
		/* TEST DATA 생성 */
		List list = new ArrayList();
		
		Map map1 = new HashMap();
		map1.put("ITEM", "blouse");
		map1.put("PRICE","1500000000");
		map1.put("LINK", "blouse@naver.com");

		Map map2 = new HashMap();
		map2.put("ITEM", "Tshirt");
		map2.put("PRICE","1000000000");
		map2.put("LINK", "Tshirt@naver.com");
		
		Map map3 = new HashMap();
		map3.put("ITEM", "Jeans");
		map3.put("PRICE","2500000000");
		map3.put("LINK", "Jeans@naver.com");
		
		list.add(0, map1);
		list.add(1, map2);
		list.add(2, map3);
		
		ModelAndView mv = new ModelAndView();
		mv.addObject("list", list);
		mv.setViewName("/views/excelConvert");
		return mv;
	}

3. excelConvert.jsp

엑셀로 그려지는 다운로드 파일이 될 jsp를 작성한다.


1. 상단에 이 페이지는 엑셀 파일이라는 것을 contentType="application/vnd.ms-excel; 꼭 명시해줘야 한다.

2. model객체에서 받은 Data를 셋팅한다.

3. 파일명에 다운로드 날짜를 붙이기 위한 소스를 작성한다. (안해도 상관 없음)

<%@ page contentType="application/vnd.ms-excel; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" %>	<%--엑셀 파일 선언 --%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%
    //출력 데이타 받기
	Object obj = request.getAttribute("list");
	obj= (obj == null) ? new ArrayList() : obj ;
	List<Map<String,String>> list=(List) obj;
	
	//파일명에 다운로드 날짜 붙여주기 위해 작성
	Date date=new Date();
	SimpleDateFormat dayformat=new SimpleDateFormat("yyyyMMdd", Locale.KOREA);
	SimpleDateFormat hourformat=new SimpleDateFormat("hhmmss", Locale.KOREA);
	String day=dayformat.format(date);
	String hour=hourformat.format(date);
	String fileName="파일명적어주세요^^"+day+"_"+hour;
	
	//필수 선언 부분
	//.getBytes("KSC5601"),"8859_1") 을 통한 한글파일명 깨짐 방지
	response.setHeader("Content-Disposition", "attachment; filename="+new String((fileName).getBytes("KSC5601"),"8859_1")+".xls");
	response.setHeader("Content-Description", "JSP Generated Date");
%>

<!doctype html>
<html lang="ko" style="overflow:hidden">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
</head>

<body bgcolor="#ffffff" text="#000000" topmargin="0" leftmargin="0">

<table width="784" border="1" bordercolor="#A2AFCC" bordercolorlight="#ffffff" bordercolordark="#6C717D" cellspacing="0" cellpadding="0">
	<thead>
	   <tr align="center">
		<th scope="col" bgcolor="CDCDCD">제품이름</th>
		<th scope="col" bgcolor="CDCDCD">가격</th>
		<th scope="col" bgcolor="CDCDCD">구매링크</th>
	   </tr>
	</thead>
	<tbody>
	<% for(int i=0; i<list.size(); i++){ 	%>
		<tr>
			<td style="text-align:left;"><%= list.get(i).get("ITEM")%> </td>
			<td style="text-align:left; mso-number-format:\#\,\#\#0\;" ><%= list.get(i).get("PRICE")%> </td>
			<td style="text-align:left;"><%= list.get(i).get("LINK")%> </td>
		</tr>
	 <%}%>
	</tbody>
</table>

</body>

</html>

4. 결과 확인


엑셀변환 버튼을 누르면 지정한 "파일명_날짜" 패턴으로 excel 파일이 다운로드 된다.




excel 파일을 열때는 다음과 같은 경고문이 나오는데, 무시하고 확인을 누르면 된다.




결과 파일이다. excel 파일이지만 소스는 html로 구성되어져 있기 때문에

body에 작성한 bgcolor="#ffffff" text="#000000" topmargin="0" leftmargin="0" 것들과

다른 css style들이 적용된 것도 확인 할 수 있다 :)



5. TIP _ 숫자형식 엑셀에서 표현하는 표기법


위 소스에서 잘 보면~ 1500000000이라는 데이터가 excel에서는 3개 단위로 , 가 찍힌것을 볼 수 있다.

mso-number-format 라는 포멧을 다음과 같이 적어 주었기 때문이다.

<td style="text-align:left; mso-number-format:\#\,\#\#0\;" >


mso-number-format 에는 다음 예시들이 있다고 한다. 바꿔가며 테스트 해보시길.

-------------------------------------------------

mso-number-format:"0"                       
        NO Decimals 
mso-number-format:"0\.000"                       
        3 Decimals 
mso-number-format:"\#\,\#\#0\.000"                       
        Comma with 3 dec 
mso-number-format:"mm\/dd\/yy"                       
        Date7 
mso-number-format:"mmmm\ d\,\ yyyy"                       
        Date9 
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM"                       
        D -T AMPM 
mso-number-format:"Short Date"                       
        01/03/1998 
mso-number-format:"Medium Date"                       
        01-mar-98 
mso-number-format:"d\-mmm\-yyyy"                       
        01-mar-1998 
mso-number-format:"Short Time"                       
        5:16 
mso-number-format:"Medium Time"                       
        5:16 am 
mso-number-format:"Long Time"                       
        5:16:21:00 
mso-number-format:"Percent"                       
        Percent - two decimals 
mso-number-format:"0%"                         
        Percent - no decimals 
mso-number-format:"0\.E+00"                       
        Scientific Notation 
mso-number-format:"\@"                         
        Text 
mso-number-format:"\#\ ???\/???"                       
        Fractions - up to 3 digits (312/943) 
mso-number-format:"\0022￡\0022\#\,\#\#0\.00"                       
        ￡12.76 
mso-number-format:"\#\,\#\#0\.00_ \;\[Red\]\-\#\,\#\#0\.00\"                       
        2 decimals, negative numbers in red and signed(1.56   -1.56)


저작자표시 비영리 변경금지

'Web > JSP/Servlet/JDBC' 카테고리의 다른 글

JSP 주석 오류 (<%-- --%>)  (0) 2019.12.17
[JSP] 화면새로고침/이전페이지/화면이동  (0) 2016.08.31
[JSP] 쿠키(Cookie) 사용방법  (0) 2016.07.05
[JDBC] jdbc예제/jdbc example  (0) 2016.06.22
[JSP] session객체/session예제  (0) 2016.06.22

관련글

티스토리툴바