회사에서 프로젝트 진행을 위해 SpreadJS 라는 툴을 사용하게 될 것 같다. (거의 확정된 듯..)
일단 프로젝트는 진행하게 될테니 미리 이게 뭔지 공부 해보자...
SpreadJS 다운로드 및 적용
SpreadJS 를 사용하기 위해 일단 홈페이지에서 다운 받았다.
처음 사용하는 거니 하나도 모르겠다.. 홈페이지에서 보니 튜토리얼이 있길래 튜토리얼의 시작하기에 나온 내용을 보면서 테스트해보았다.
<< 사용한 코드 >>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="SpreadJS.Release.16.0.2/SpreadJS/css/gc.spread.sheets.excel2016colorful.16.0.2.css" rel="stylesheet"
type="text/css" />
<script src="SpreadJS.Release.16.0.2/SpreadJS/scripts/gc.spread.sheets.all.16.0.2.min.js"
type="text/javascript"></script>
<script src="SpreadJS.Release.16.0.2/SpreadJS/scripts/resources/ko/gc.spread.sheets.resources.ko.16.0.2.min.js"
type="text/javascript"></script>
<script type='text/javascript'>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
GC.Spread.Common.CultureManager.culture("ko-kr");
var sheet = spread.getSheet(0);
sheet.setValue(1, 1, "Test");
sheet.setValue(2, 1, 123);
sheet.setValue(3, 1, '=SUM(C2,20)');
sheet.setFormula(3, 2, '=SUM(C2,20)');
/* 이외의 테스트 한 코드 */
};
</script>
</head>
<body>
<div id="ss" style="width:100%;height:500px"></div>
</body>
</html>위의 코드로 테스트 해보면서 알 수 있었던 건, 시트에 값을 넣을 때 Workbook 객체가 저장된 spread 변수를 이용해서 넣는 게 아니란 것이다. spread 변수로 sheet? 라는 것을 또 불러와서 그걸 이용해 값을 넣어야 한다.
Workbook 객체와 Worksheet 객체의 차이
Workbook
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });위의 코드로 예상해 보건데, Workbook 이라는 객체로 엑셀의 통합 문서를 표시하는 돔을 그리는 것 같다.
여러 div 돔을 생성해서 각각의 아이디를 주고 Workbook 객체를 생성해 봤는데 아래 이미지 처럼 엑셀의 통합 문서가 여러 개 떴다.
Worksheet
튜토리얼을 보면서 알게 된 건, Worksheet 객체를 이용하면 엑셀 시트를 추가할 수 있다는 것이다. Worksheet 객체는 시트 하나 하나를 생성하고 설정할 때 쓰인다. Workbook 객체에 Worksheet 객체를 생성 해서 시트를 추가했다.
- addSheet() : 시트 생성
- removeSheet() : 특정 시트를 지정해서 삭제
결론
Workbook 객체로 엑셀 화면 같은 돔을 생성하고 그 안에 시트를 생성할 때 Worksheet 객체를 이용하면 된다. 또 생성된 시트에 대한 설정 같은 건 Worksheet 객체로 하는 듯 하다. 튜토리얼을 보다 보니 여러 가지 기능이 있던데 프로젝트에 쓰일 기능이 있는지 보고 테스트 해봐야 할 듯.
'SpreadJS' 카테고리의 다른 글
| [SpreadJS] 이미지 삽입 (0) | 2023.03.15 |
|---|---|
| [SpreadJS] 컨텍스트 메뉴 (0) | 2023.03.08 |
| [SpreadJS] 조건부 서식 (0) | 2023.03.03 |
| [SpreadJS] ExcelIO (0) | 2023.02.16 |
| [SpreadJS] 데이터 바인딩 (0) | 2023.02.13 |
