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

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

by 나비와꽃기린 2016. 9. 29.

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

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


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)


댓글2

  • 압도적감사 2019.11.12 11:37

    많은 도움이 됐습니다. 혹시 셀크기 조정은 어떻게 줘야 할까요..?
    답글

  • dd 2019.11.14 15:06

    혹시 경로 설정은 어떻게 해야할까요
    다른이름으로 저장하기처럼 창 띄우고싶은데

    무조건 Download 폴더에 저장되는건가요?
    답글