GcExcel을 SpreadJS와 함께 사용하는 방법

추천0

페이지 정보

작성자 MESCIUS루카스

작성일 2022-10-12 09:17 조회 701회 댓글 0건

본문

관련링크

이번 글에서는 GcExcel Java와 SpreadJS를 함께 사용하여,

여러분의 웹 솔루션에 완전한 Excel(엑셀) 파일을 불러오고 수정하며 이를 다시 저장할 수 있는 기능을 구현하는 방법을 설명합니다.

SpreadJS는 출시된 이래로 JavaScript 만으로 MS Excel(엑셀)과 유사한 화면(UI) 뿐만 아니라 기존의 Excel과 호환이 되는 기능을 프론트엔드(클라이언트) 단에서 구현하고 개발하기 위한 유일한 JS 라이브러리로서 전세계 개발자 분들에게 사용되고 있습니다.

물론 프론트엔드/클라이언트 단에서 동작하는 SpreadJS 만으로도 완전한 Excel 에디터를 만들 수 있지만,

대용량의 Excel 데이터를 읽고 빠른 계산 처리와 같은 퍼포먼스에 대한 니즈가 늘어나고, 동시에 기업에서는 엑셀 파일 & 데이터에 유출을 막기 위한 대한 강력한 보안이 필요해짐에 따라서, 서버 단(백엔드)에서 Excel 데이터를 처리하고 관리할 수 있는 Java 또는 .NET Core/5/6 기반의 API/라이브러리에 대한 요청이 많았습니다.

또한, 기존에 Java/.NET 기반의 오픈소스 Excel API는 단순한 데이터 작업 외에는, 기능 제약이 많고 성능 저하 이슈가 심각하여 사용이 불편하다는 피드백이 많았습니다. (블로그: 오픈소스 대신 GcExcel을 사용해야 하는 이유)

이를 위해, 그레이프시티에서는 Java 또는 .NET과 같이 서버/백앤드 단에서 사용할 수 있는 Excel API인 GcExcel(Java/.NET) API 라이브러리를 출시하였습니다. 이제 서버 단에서 서버 자원을 이용하여 더욱 빠르게 대용량의 Excel(엑셀) 파일을 컨트롤 할 수 있습니다.

각 제품의 자세한 설명은 아래의 링크를 참고해주세요.

두 제품을 독립적으로 사용할 수도 있지만,

클라이언트 라이브러리와 서버 단 라이브러리를 함께 사용했을 때 강력한 시너지를 발휘할 수 있습니다.

일반적으로 개발자 분들이 SpreadJS와 GcExcel 제품을 함께 사용하는 경우는 아래와 같습니다:

서버에 Excel 또는 json(ssjon) 등 파일 형태로 엑셀 데이터를 관리하고 보관하는 경우
- 웹에서 작업한 최종 사용자의 엑셀 작업을 서버에 저장하여 보안 및 작업 관리를 하고자 하는 경우
클라이언트(브라우저) 단에서 연산하기에 무리가 있는 대용량의 파일을 불러와야 하는 경우
SpreadJS에 작업한 내용(수식,그림, 도형, 차트 등을 포함)을 그대로 서버 단에서 컨트롤 하고자 하는 경우

두 제품을 함께 사용했을 때의 기본적인 단계는 아래와 같이 진행됩니다.

서버에 있는 Excel 파일을 GcExcel에서 읽어 옵니다.
Workbook.ToJson을 호출하여 전체 통합 문서를 JSON 문자열로 내보내고 클라이언트 측으로 전달합니다.
클라이언트 측의 SpreadJS에서 JSON 문자열을 받아 fromJSON을 호출하여 화면에 나타냅니다.
저장 버튼 클릭 시 화면의 workbook을 서버의 엑셀 파일로 다시 저장합니다.

또한 이번 설명에서는 JSP(Java Server Pages) 환경에서 단계를 진행하며,
기본적인 환경 설정은 건너뛰고 설명합니다.

사용 기술 Stack:

JSP (Java Server Pager)
SpreadJS = 웹 엑셀(Excel) 화면 구현
GcExcel Java = 서버 단 엑셀(Excel) 컨트롤 서비스 구현

1. JSP 프로젝트를 생성하고, GcExcel 라이브러리 Jar 파일 및 종속되는 라이브러리 Jar 파일을 추가합니다.

※ JSP 외 프로젝트에서 GcExcel 라이브러리를 추가하려면 데모를 참고하세요.

2. GcExcel을 이용하여 서버에 있는 엑셀 파일을 불러오고 JsonString으로 내보낼 JSP 파일을 생성합니다.

GcExcel_load.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.grapecity.documents.excel.*"%>
<% request.setCharacterEncoding("UTF-8"); %>   

<%	
	System.out.println(pageContext.getServletContext().getRealPath("/"));
	String path = application.getRealPath("Excel/ProjectCostTracker.xlsx");
	Workbook workbook = new Workbook();
	workbook.open(path);
	
	String Json = workbook.toJson();
	 
	response.getWriter().write(Json);
%>

3. 내보낸 JsonString을 SpreadJS로 불러와 화면으로 보여줄 JSP 파일을 생성합니다.

SpreadJS.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="spreadjs culture" content="ko-kr" />
<title>SpreadJS_GcExcel</title>
<link href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2016colorful.15.2.3.css" rel="stylesheet"/>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.15.2.3.min.js" type="application/javascript"></script>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.15.2.3.min.js" type="application/javascript"></script>
<script src='https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/ko/gc.spread.sheets.resources.ko.15.2.3.min.js'></script>
<script src='https://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
	<div id="ss" style="width:100%;height:700px"></div>
</body>
<script>
$(document).ready(function() {
	$.ajax({
        type : "POST", 
        url : "GcExcel_load.jsp",
        dataType : "json",
        error : function(){
            alert("에러!!!!");
        },
        success : function(data){ 	
        	console.log(data);
	        workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
	        
	        workbook.suspendPaint();
	        workbook.suspendCalcService();
	        workbook.suspendEvent();
	        
	        var jsonOptions = {
    	       incrementalLoading: true, 
    	    }
	        workbook.fromJSON(data, jsonOptions);
	        
	        workbook.resumeEvent();
	        workbook.resumeCalcService();
	        workbook.resumePaint();
        }
         
    });
});
</script>
</html>

결과 화면

4. 다시 서버로 저장하기 위해 GcExcel로 전달하는 버튼과 함수를 작성합니다.

SpreadJS.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="spreadjs culture" content="ko-kr" />
<title>SpreadJS_GcExcel</title>
<link href="https://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2016colorful.15.2.3.css" rel="stylesheet"/>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.15.2.3.min.js" type="application/javascript"></script>
<script src="https://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.15.2.3.min.js" type="application/javascript"></script>
<script src='https://cdn.grapecity.com/spreadjs/hosted/scripts/resources/ko/gc.spread.sheets.resources.ko.15.2.3.min.js'></script>
<script src='https://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
	<button onClick="sv()"/>Excel Save on Server</button>
	<div id="ss" style="width:100%;height:700px"></div>
</body>
<script>
$(document).ready(function() {
	$.ajax({
        type : "POST", 
        url : "GcExcel_load.jsp",
        dataType : "json",
        error : function(){
            alert("에러!!!!");
        },
        success : function(data){ 	
        	console.log(data);
	        workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
	        
	        workbook.suspendPaint();
	        workbook.suspendCalcService();
	        workbook.suspendEvent();
	        
	        var jsonOptions = {
    	       incrementalLoading: true, 
    	    }
	        workbook.fromJSON(data, jsonOptions);
	        
	        workbook.resumeEvent();
	        workbook.resumeCalcService();
	        workbook.resumePaint();
        }
         
    });
});

function sv() {
	workbook = GC.Spread.Sheets.findControl(document.getElementById("ss"));
	var json = JSON.stringify(workbook.toJSON());
	//console.log(json);
	$.ajax({
		type: 'POST',
		url: 'GcExcel_save.jsp',
		data: {"jsonstr":json},
		error : function() {
			alert("Error");
		},
		success : function(data) {
			alert("Completed");
			//document.getElementById('file-path').innerHTML = '<p class="notification is-success mb-4">Success fully saved into : <b> '+data+'</b></p>';
			
		}
	})
}
</script>
</html>

5. GcExcel에서 jsonString을 받아 엑셀 파일로 저장하는 JSP 파일을 생성합니다.

GcExcel_save.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@page import="com.grapecity.documents.excel.Workbook"%>
<% request.setCharacterEncoding("UTF-8"); %>   

 <% 
    String json = request.getParameter("jsonstr");
 	String path = application.getRealPath("Excel/ProjectCostTracker.xlsx");
    System.out.println(path);
 	
    Workbook workbook = new Workbook();    	
    workbook.fromJson(json);
    workbook.save(path);

    
   response.getWriter().write(path);
 %>

최종 결과 화면