[Javascript] [JAVA] html 코드를 엑셀파일 형식으로 저장하기
html 코드를 엑셀파일 형식으로 저장하는 방법이다.
html 코드로 테이블(table)을 그려서 엑셀파일로 저장하는 방식이다.
저장 시 파일형식은 xls 확장자다.
1. javascript(js)에서 html 코드를 엑셀파일 저장하기
먼저 자바스크립트에서 html 코드를 엑셀파일로 만드는 방법이다.
크롬 브라우저에서 html 을 띄우고 [실행] 버튼을 클릭하면 strHtml 변수 내용에 해당하는 html 코드가 fileName.xls 형식의 엑셀파일로 저장된다.
참고로 아래 코드는 IE11에서는 동작하지 않고 크롬 브라우저에서 동작한다.
test.html 내용
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8” />
<script>
function saveExcelFile() {
var strHtml = “”;
strHtml += “<html>\n”;
strHtml += “<head>\n”;
strHtml += “<meta http-equiv=\”Content-Type\” content=\”application/vnd.ms-excel; charset=utf-8\”>\n”;
strHtml += “<meta name=ProgId content=Excel.Sheet>\n”;
strHtml += “<meta name=Generator content=\”Microsoft Excel 11\”>\n”;
strHtml += “<style>\n”;
strHtml += “td, th {\n”;
strHtml += ” border: 1px solid #000000;\n”;
strHtml += “}\n”;
strHtml += “</style>\n”;
strHtml += “</head>\n”;
strHtml += “<body>\n”;
strHtml += “<table>\n”;
strHtml += “<tr>\n”;
strHtml += “<th style=\”background-color: #EEEEEE;\”>국어</th>\n”;
strHtml += “<th style=\”background-color: #EEEEEE;\”>영어</th>\n”;
strHtml += “<th style=\”background-color: #EEEEEE;\”>수학</th>\n”;
strHtml += “</tr>\n”;
strHtml += “<tr>\n”;
strHtml += “<td>100점</td>\n”;
strHtml += “<td>90점</td>\n”;
strHtml += “<td>95점</td>\n”;
strHtml += “</tr>\n”;
strHtml += “</table>\n”;
strHtml += “</body>\n”;
strHtml += “</html>”;
var elemA = document.createElement(“a”);
elemA.href = URL.createObjectURL(new Blob([strHtml], {type: “application/csv;charset=utf-8;”}));
elemA.download = “fileName.xls”;
elemA.style.display = “none”;
document.body.appendChild(elemA);
elemA.click();
document.body.removeChild(elemA);
}
</script>
</head>
<body>
<input type=“button” value=“실행” onclick=“saveExcelFile();” />
</body>
</html>
|
2. JAVA에서 html 코드를 엑셀파일 저장하기
다음으로 자바에서 html 코드를 엑셀파일로 만드는 방법이다.
test.jsp 내용
|
<%@ page language=“java” pageEncoding=“UTF-8”%><%@
page contentType=“text/html; charset=UTF-8”%><%@
page import=“java.net.URLEncoder”%><%
request.setCharacterEncoding(“utf-8”);
response.setContentType(“application/vnd.ms-excel”);
response.setCharacterEncoding(“utf-8”);
response.setHeader(“Content-Disposition”, “attachment; filename=\”” + “fileName.xls” + “\””);
response.setHeader(“Pragma”, “no-cache”);
response.setHeader(“Cache-Control”, “no-cache”);
StringBuilder strHtml = new StringBuilder();
strHtml.append(“<html>\n”);
strHtml.append(“<head>\n”);
strHtml.append(“<meta http-equiv=\”Content-Type\” content=\”application/vnd.ms-excel; charset=utf-8\”>\n”);
strHtml.append(“<meta name=ProgId content=Excel.Sheet>\n”);
strHtml.append(“<meta name=Generator content=\”Microsoft Excel 11\”>\n”);
strHtml.append(“<style>\n”);
strHtml.append(“td, th {\n”);
strHtml.append(” border: 1px solid #000000;\n”);
strHtml.append(“}\n”);
strHtml.append(“</style>\n”);
strHtml.append(“</head>\n”);
strHtml.append(“<body>\n”);
strHtml.append(“<table>\n”);
strHtml.append(“<tr>\n”);
strHtml.append(“<th style=\”background-color: #EEEEEE;\”>국어</th>\n”);
strHtml.append(“<th style=\”background-color: #EEEEEE;\”>영어</th>\n”);
strHtml.append(“<th style=\”background-color: #EEEEEE;\”>수학</th>\n”);
strHtml.append(“</tr>\n”);
strHtml.append(“<tr>\n”);
strHtml.append(“<td>100점</td>\n”);
strHtml.append(“<td>90점</td>\n”);
strHtml.append(“<td>95점</td>\n”);
strHtml.append(“</tr>\n”);
strHtml.append(“</table>\n”);
strHtml.append(“</body>\n”);
strHtml.append(“</html>”);
out.print(strHtml.toString());
%>
|
3. 결과
결과는 아래와 같이 엑셀파일이 만들어진다.
js와 자바의 차이가 있다면 js 코드는 한 줄씩 해석해서 실행하는 인터프리터 언어이므로 html 코드의 양이 많을 경우 그려내는 속도가 다소 느릴 수 있다.
4. 제약사항
제약사항으로는 (1) 디자인적 제약사항과 (2) 확장자 제약사항(xlsx 확장자 불가능)이 있다.
예를 들어 테두리 선을 적용할 때 border를 1px solid #000000; 로 그려내도 엑셀에서 직접 적용할 때처럼 얇게 표시되지 않는다.
만약 xls 확장자가 아닌 xlsx 확장자를 사용하고 싶거나, 디테일하게 디자인을 적용하고 싶다면 자바 POI 라이브러리를 찾아보는 것을 권장한다.