디자이너 프로그램을 이용한 템플릿 작성과 활용 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

디자이너 프로그램을 이용한 템플릿 작성과 활용

페이지 정보

작성자 GrapeCity 작성일 21-01-19 14:26 조회 171회 댓글 0건

본문

첨부파일

GrapeCity의 SpreadJS는 웹 상에서 Excel 기반의 데이터를 생성하고 편집하는 다양한 방법을 제공하고 있습니다.


이번 포스팅에서는 SpreadJS와 패키지로 함께 제공해 드리는 "데스크탑 디자이너"를 활용하여,


템플릿을 만들고, 이를 SpreadJS에 불러 온 뒤, 데이터 바인딩 만으로 원하는 위치에 값이 자동으로 들어가 양식을 완성하는 방법에 대해서 알려드리겠습니다.


간단한 샘플로 견적서를 템플릿을 불러와, 데이터 바인딩을 통해 자동 완성하는 방법에 대해서, 아래와 같은 순서로 진행해보도록 하겠습니다.


  1. 디자이너 설치 및 실행

  2. 견적서 양식 디자이너로 불러오기

  3. 데이터 필드를 생성하고 특정 셀에 바인딩 하기

  4. 견적서 양식 Json 파일로 저장하기

  5. SpreadJS 컨트롤 생성하기

  6. SpreadJS에 JSON 양식 불러오기

  7. 데이터를 바인딩 하여, 양식 자동 완성


테스트를 위한 견적서 샘플 Excel 파일은 첨부 파일로 올려 놨으며, 다운 받으시어 따라 해보실 수 있습니다.


변환된 엑셀 Json 파일은 해당 링크를 통해 확인 할 수 있습니다.


디자이너 설치 및 실행


 SpreadJS를 홈페이지에서 다운 받으신 후에, 압축을 풀어 주시면, 아래와 같은 경로에서, 런타임 디자이너를 실행할 수 있습니다.


  • 경로: SpreadJS.Release.xx.x.x\Designer\Designer Runtime

  • 프로그램명: SpreadJS-Designer.xx.x.x.exe

    (위의 경로는 V14 버전을 기준으로 합니다. 버전별로 경로가 상이할 수 있습니다. )


디자이너를 실행하면, 엑셀과 비슷한 디자이너 화면을 볼 수 있습니다.


9578f9dea1bbca3497ffcff335599c28_1611032943_7052.PNG
 

*참고:

라이선스를 구매하셨는데 체험판 문구가 발생하는 경우,

디자이너 프로그램의 라이선스 키는 구매 시,받은 라이선스 증서를 첨부하여

sales-kor@grapecity.com으로 별도로 요청을 주시면 발급 드립니다.

디자이너 소스코드를 사용하시면, 엑셀과 동일한 방법으로 원하시는 템플릿 양식을 만들 수 있습니다.


견적서 양식 디자이너로 불러오기


SpreadJS 디자이너 화면에서, 아래와 같은 메뉴를 통해 기존에 사용하는 견적서 엑셀 파일을 오픈합니다.

(샘플에서 사용하는 견적서 파일은 첨부 파일을 확인해 주세요.) 

  • 파일 > Import > Excel File 9578f9dea1bbca3497ffcff335599c28_1611033017_5315.png

파일을 정상적으로 오픈 하셨다면, 디자이너 상에서 아래와 같이 엑셀 시트를 그대로 불러온 것을 볼 수 있습니다.

9578f9dea1bbca3497ffcff335599c28_1611033041_3539.png
 

해당 견적서 양식에는,


부가세, 합계, 공급가액 합계에는 이미 계산을 위한, Excel 수식이 이미 정의 되어 있습니다.


여러분이 사용하시는 다른 Excel 양식에 수식이 적용되어 있더라도, SpreadJS에서는 이를 완벽하게 불러올 수 있습니다. 


데이터 필드를 생성하고 특정 셀에 바인딩 하기


이제 불러온 견적서 엑셀 파일에서 데이터가 자동으로 들어가야 할 부분에 변수를 선언하여, 데이터 바인딩 시에 자동으로 해당 영역으로 데이터가 들어가도록 만들어 보겠습니다.


그러기 위해서는 먼저 백앤드로 부터 전달 되어올 JSON 형식과 동일하게 데이터 필드를 생성하여 주어야 합니다.


1) 상단 메뉴 탭에서, "데이터" > "템플릿" 메뉴를 선택합니다.

9578f9dea1bbca3497ffcff335599c28_1611033098_2609.png
 

2) 필드 리스트 영역에서, Source 옆에 + 버튼을 눌러, "date", "name", "products"라는 데이터 필드를 추가 합니다.

(해당 데이터 필드는 실제 사용하실 json 스키마의 아이템명과 동일해야 합니다.)

9578f9dea1bbca3497ffcff335599c28_1611033141_7159.png
 

3) product에는 여러 제품 정보가 들어올 것이기 때문에, 아래와 같이 표 형식으로 변경해 줍니다.

9578f9dea1bbca3497ffcff335599c28_1611033158_2767.png

4) product를 테이블로 변경한 후, product 노드 아래에, "code", "name", "quantity", "amount", "netprice" 필드 값을 추가합니다.

9578f9dea1bbca3497ffcff335599c28_1611033189_82.png 

이제 데이터 필드 생성이 완료 되었습니다.


다음으로 만들진 데이터 필드를 데이터가 들어가야 할 셀에 "드래그 앤 드랍"으로 끌어다 넣어 줍니다.


1) date와 name 데이터 필드를 Date 입력 셀과 Name 입력 셀에 끌어다 넣어 줍니다. 이렇게 하면, [date], [name]으로 변수가 자동으로 생성되는 것을 볼 수 있습니다.

9578f9dea1bbca3497ffcff335599c28_1611033218_4383.png


2) product 노드도 동일하게 "품목코드" 위에 끌어다 놓습니다.

9578f9dea1bbca3497ffcff335599c28_1611033259_9907.png
 

끌어다 놓으면 하기와 같이 데이터 필드가 자동으로 들어갑니다.

9578f9dea1bbca3497ffcff335599c28_1611033289_6553.png
 

표의 범위를 수정합니다.

9578f9dea1bbca3497ffcff335599c28_1611033309_9022.png
 

* 주의:

만약 표 데이터 필드에 셀 병합 있다면 엑셀 내보내기 시 양식이 달라질 수 있기 때문에 미리 셀 병합이 없도록 양식을 수정합니다.

(이는 엑셀에서 표 내의 셀 병합을 지원하지 않기 때문입니다.)


3-1) 데이터 맵핑을 수정할 수 있습니다.

. 표의 파란색 헤더를 클릭하여 나타나는 작은 "표 모양" 아이콘을 클릭합니다.

. 셀 병합이 없는 범위라면 자동으로 각 컬럼에 맞게 바인딩됩니다.

9578f9dea1bbca3497ffcff335599c28_1611033440_0948.png 

3-2) 만약 셀 병합이 있는 상태로 진행한다면

. 아래 화면과 같이 각 컬럼에 들어가야할 항목을 바인딩 해줍니다. ​ ( 바인딩 시에 병합되어 있는 셀은 empty로 설정을 해주셔야 합니다.) 9578f9dea1bbca3497ffcff335599c28_1611033479_2478.png



템플릿을 저장하기 전에, 템플릿의 변경된 스타일을 수정해주도록 하겠습니다.


1) 상품(Products)를 나열하는 영역을 선택하여 표의 스타일을 "None"으로 변환해줍니다.

9578f9dea1bbca3497ffcff335599c28_1611033537_3361.png
 

2) 다음으로 상품(product)영역의 영어로 변경된 헤더를 다시 원래 한글로 변경해줍니다.

엑셀에서 데이터를 수정하시는 것과 같이 "F2 키" 또는 더블클릭을 통해서 수정이 가능합니다.

9578f9dea1bbca3497ffcff335599c28_1611033732_5679.png
 

3) 글자를 가리는 필터 단추를 제거해 줍니다.

9578f9dea1bbca3497ffcff335599c28_1611033768_0355.png
 


이제 자동완성을 위한 템플릿 작성이 완료되었습니다.




양식 Json 파일로 저장하기


위에서 작성한 템플릿을 웹에서 다양하게 사용하기 위해서는 Json 형식으로 변환하는 것이 좋습니다.


해당 Json 문자열을 DataBase에 저장하여 사용하거나, 또는 Json 파일로 가지고 저장할 수도 있습니다.


이번 샘플에서는 쉬운 이해를 위해 Json 파일로 저장하여, public 경로에서 JavaScript로 불러오는 방법을 사용할 것입니다.


저장을 위해서는, "파일 > 저장(Save)"울 통해서 원하는 위치에 ssJson 형식으로 저장하시면 됩니다.

* ssJson은 SpreadJS에서 사용하는 Json 확장자로 내부는 Json 문법을 동일하게 따릅니다.


9578f9dea1bbca3497ffcff335599c28_1611033825_0623.png
 

템플릿 사용을 위한 모든 준비가 되었으며, 다음 섹션에서는 SpreadJS 컨트롤에서 어떻게 견적서 템플릿을 불러와 자동 입력 할 수 있는지를 알아보겠습니다.




SpreadJS 컨트롤 생성하기

다운 받으신 SpreadJS zip 파일에 있는 SpreadJS 라이브러리를 여러분에 코드에 선언하여 주시면 됩니다.


SpreadJS 컨트롤을 사용하기 위한, 초기 세팅 방법은 "SpreadJS 빠른 시작" 튜토리얼을 참고해주세요.


SpreadJS의 JS 라이브러리와 css 선언이 되었다면, 아래 코드를 통해 화면에 SpreadJS 컨트롤을 띄워 봅니다.


HTML 코드:

<div id="ss" style="width:100%;height:600px"></div>


JS 코드:

$(document).ready(function () {                    
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); 
});




SpreadJS에 JSON 견적서 양식 불러오기


이제 앞에서 SpreadJS 디자이너 프로그램으로 만든 견적서 Json 양식을 Spreadjs로 불러와 보도록 하겠습니다.

여기에서는 해당 Json 파일을 파일서버에 올려놓고 URL로 불러오는 방식으로 진행하고자 합니다.


위에서 언급드린 것과 같이 해당 Json 문자열을 Database에 저장하여, Excel 파일 없이도 SpreadJS를 통해 엑셀을 오픈할 수 있습니다.


다양한 방법을 통해서 개발해보시기를 권장드립니다.


JS코드:

$(document).ready(function () { 
​
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
 
 $.ajax({
   //템플릿 불러오기
   url: "https://assets.codepen.io/975719/template.ssjson",
   datatype: "json",
   success: function (data) {
     //ssjson file (Json) 읽어, SpreadJS에 뿌려주기.
     spread.suspendPaint();
     spread.fromJSON(JSON.parse(data));
  },
   error: function (ex) {
     alert('Exception:' + ex);
  }
});
});




데이터를 바인딩 하여, 양식 자동 완성


마지막으로 불어온 견서양식에 데이터를 바인딩 하여,

앞서 설정한 데이터 영역에 자동으로 데이터가 들어가 견적서가 완성될 수 있도록 만들어 보겠습니다.


1) 먼저 같은 JS 페이지에서 아래와 같이 Json 형식으로 임의의 데이터를 만들어 주겠습니다.

var productData = {
 "date":"2021-01-12", 
 "name":"Lucas", 
 "product":[
  {
       "code":"SJS13M02", 
       "name":"SpreadJS 13 Developer License with Maintenance - New License", 
       "quantity": 1, 
       "amount": 1999000, 
       "netprice": 1999000
  },
  {
       "code":"SJS13DMD01", 
       "name":"SpreadJS 13 - Distribution License (Main Domain) - New License", 
       "quantity": 2, 
       "amount": 2332000, 
       "netprice": 4664000
  }
]
}


2) 이제 만들어 준 데이터를 아래와 같이 SpreadJS에 바인딩 해줍니다.

$(document).ready(function () {                    
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
 $.ajax({
 
   //템플릿 불러오기
   url: "https://assets.codepen.io/975719/template.ssjson",
   datatype: "json",
   success: function (data) {
    
    //ssjson file (Json) 읽어, SpreadJS에 뿌려주기.
     spread.suspendPaint();
     spread.fromJSON(JSON.parse(data));
    
    //데이터 소스 설정
     var source = new GC.Spread.Sheets.Bindings.CellBindingSource(productData);
     spread.getSheet(0).setDataSource(source);**
     spread.resumePaint();
     
  },
   error: function (ex) {
     alert('Exception:' + ex);
  }
});
});




최종 결과 확인하기


위의 과정을 모두 따라하시면, 아래와 같은 결과를 확인하실 수 있습니다.

보고서 작성, 견적서 발급, 신청서 작성 등 다양한 분양에 적용해 보실 수 있습니다.


 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.