POI, JSON을 활용하여 HTML Table을 Excel 출력 하기

POI와 JSON을 활용하여 프론트에 마크업되어있는 HTML Table의 값을 DB 거치지 않고 바로 Excel로 출력하는 방법을 포스팅하겠습니다.

컨셉은 DB연결 없이, 현재 마크업 되어있는 HTML의 Table의 값을 JSON으로 변환 후 Controller에서 해당 JSON 값으로 POI 라이브러리를 사용하여 엑셀 출력하는 컨셉입니다.

기본적인 게시판 형태를 갖춘 Table입니다. DB에서 값을 불러왔든, 마크업을 직접 하였든 사용자 입장에서 보여지는 최종 화면에 출력된 Table 값으로만 Excel 출력을 해 보겠습니다.

'Excel로 다운받기'를 클릭하면 다음 Javascript Function이 실행됩니다.

function excelDown() {
    if (confirm("엑셀파일로 저장하시겠습니까?") == true) {
        var myTable = $("table");
        var rows = $("table > tbody > tr").length;
        var columns = $("table > thead > tr > th").length;
        if (rows < 2) {
            alert("엑셀파일로 저장할 데이터가 없습니다.");
            return;
        }
        var dataParam = tableToJson(myTable);
        var myTitle = dataParam[0].toString();
        var myContents = dataParam[1];
        var name = "Table To Excel Example";
        var form = "<form action='/excelDown.do' method='post'>";
        form += "<input type='hidden' name='title' value='" + myTitle + "' />";
        form += "<input type='hidden' name='contents' value='" + myContents + "' />";
        form += "<input type='hidden' name='name' value='" + name + "' />";
        form += "<input type='hidden' name='rows' value='" + rows + "' />";
        form += "<input type='hidden' name='columns' value='" + columns + "' />";
        form += "</form>";
                
        jQuery(form).appendTo("body").submit().remove();
    }
}
 

중간에 tableToJson Function은 기본적으로 Table의 첫 행(th)을 타이틀로 가져오고, 나머지 내용(td)은 JSON 형태로 가져옵니다. 이렇게 생성된 내용들을 excelDown 컨트롤러로 보내게 됩니다.

tableToJson Function을 보면 다음과 같습니다.

function tableToJson(table) {
    var myRows = [];
    var title = [];
    var $headers = $("th");
    $("th").each(function(index, item) {
        title[index] = $(item).html();
    });
 
    var $rows = $("tbody tr").each(
            function(index) {
                $cells = $(this).find("td");
                myRows[index] = {};
                $cells.each(function(cellIndex) {
                    myRows[index][$($headers[cellIndex]).html()] = $(
                            this).html();
                });
            });
 
    var myObj = {};
    myObj = myRows;
 
    var myJson = JSON.stringify(myObj);
    return [ title, myJson ];
}
 

간단하게 마크업되어있는 Table의 내용을 Title과 JSON으로 반환하는 함수입니다.

Controller의 excelDown에서는 해당 파라미터들을 받아서 POI 라이브러리를 통해 Excel로 변환해 줍니다. 살펴보면 다음과 같습니다.

@RequestMapping(value = "excelDown")
public void excelDown(HttpServletRequest request, HttpServletResponse response,
        @RequestParam(value = "title") String title, @RequestParam(value = "contents") String contents,
        @RequestParam(value = "name") String name, @RequestParam(value = "rows") String rows,
        @RequestParam(value = "columns") String columns) throws Exception {
 
    try {
 
        // request로 json 데이터 받기 String으로 받아 json으로 변환
        JSONArray dataArry = new JSONArray(contents);
        String[] myTitle = title.split(",");
 
        // 로우 파라미터 int로 변환
        int myRows = Integer.parseInt(rows);
 
        // 컬럼 파라미터 int로 변환
        int myColumns = Integer.parseInt(columns);
 
        // Workbook 생성
        Workbook xlsWb = new HSSFWorkbook(); // Excel 2007 이전 버전
 
        // Sheet 생성
        Sheet sheet1 = xlsWb.createSheet(name);
        Row row = null;
        Cell cell = null;
 
        row = sheet1.createRow(0);
 
        // excel 파일 저장
        for (int r = 0; r < myRows; r++) {
 
            // 셀 제목 설정
            if (r == 0) {
 
                for (int c = 0; c < myColumns; c++) {
 
                    cell = row.createCell(c);
                    cell.setCellValue(myTitle[c]);
 
                }
            }
 
            row = sheet1.createRow(r + 1); // 두번째줄을 생성(i+1)
 
            for (int c = 0; c < myColumns; c++) {
 
                cell = row.createCell(c);
                cell.setCellValue(dataArry.getJSONObject(r).getString(myTitle[c]));
 
            }
 
        }
 
        // 브라우저 별 한글 인코딩
        String header = request.getHeader("User-Agent");
        if (header.contains("MSIE") || header.contains("Trident")) { // IE 11버전부터 Trident로 변경되었기때문에 추가해준다.
            name = URLEncoder.encode(name, "UTF-8").replaceAll("\\+", "%20");
            response.setHeader("Content-Disposition", "attachment;filename=" + name + ".xls;");
        } else if (header.contains("Chrome")) {
            name = new String(name.getBytes("UTF-8"), "ISO-8859-1");
            response.setHeader("Content-Disposition", "attachment; filename=\"" + name + "\".xls");
        } else if (header.contains("Opera")) {
            name = new String(name.getBytes("UTF-8"), "ISO-8859-1");
            response.setHeader("Content-Disposition", "attachment; filename=\"" + name + "\".xls");
        } else if (header.contains("Firefox")) {
            name = new String(name.getBytes("UTF-8"), "ISO-8859-1");
            response.setHeader("Content-Disposition", "attachment; filename=\"" + name + "\".xls");
        }
 
        // 엑셀 출력
        xlsWb.write(response.getOutputStream());
        xlsWb.close();
        System.out.println("Excel 출력 완료");
    } catch (Exception e) {
        e.printStackTrace();
        response.setHeader("Set-Cookie", "fileDownload=false; path=/");
        System.out.println("Excel 출력 실패");
    }
 
}

POI의 경우 라이브러리 버전에 따라서 설정 방법이 다를 수 있습니다. 사용하는 버전에 맞게 설정하면 됩니다.