빠른 시작

다음 빠른 시작 섹션에서는 새 스프레드시트와 기존 스프레드시트에서 SpreadJS 디자이너 컴포넌트를 프로젝트에 사용하는 방법을 안내합니다. 자이너 컴포넌트의 최신 스크립트 및 CSS 파일은 여기에서 다운로드할 수 있습니다. 참조 추가에 대한 자세한 내용은 시작하기 주제를 참고하세요.

ChatGPT에게 묻기

참고: 디자이너 컴포넌트는 시트 컴포넌트와 함께만 사용할 수 있습니다. 시트 컴포넌트 사용 방법은 빠른 시작 주제를 참고하세요.

새 스프레드시트와 함께 디자이너 컴포넌트 사용하기

다음 단계를 따라 SpreadJS 디자이너 컴포넌트와 새 스프레드시트를 함께 표시하는 HTML 페이지를 만드세요.

‘메모장’ 또는 원하는 코드 편집기를 엽니다.

파일에 다음 HTML 코드를 추가하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="spreadjs culture" content="ko-kr" />
    <title>스프레드시트 디자이너</title>
</head>
<body>
</body>
</html>

HEAD 요소 태그 안에 다음 SpreadJS CSS 및 JS 파일을 추가하세요.

<!--CSS files--> 
<link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />

<!--Script files-->
<script type="text/javascript" src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.print.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.x.x.x.min.js"></script>

HEAD 요소 태그 안에 다음 디자이너 컴포넌트의 CSS 및 JS 파일을 추가하세요.
```
 
<link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />

<script type="text/javascript" src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js"></script>
<script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js"></script>
```
참고: 스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.
또한, 디자이너 컴포넌트 리소스 파일(gс.spread.sheets.designer.resource.ko.x.x.x.min.js)이 gc.spread.sheets.designer.all.x.x.x.min.js보다 항상 먼저 참조되어야 합니다.

BODY 요소에 컨테이너로 사용할 DOM 요소를 포함하세요.

<body>
    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>

HEAD 섹션의 script 요소 안에서 디자이너 컴포넌트를 초기화하세요. 초기화 전에 디자이너 컴포넌트와 SpreadJS의 라이선스 키도 설정해야 합니다.

<script>
    //라이선스 키 설정하기
    //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
    //GC.Spread.Sheets.LicenseKey = "XXXX";

    var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
</script>

HTML 파일의 전체 코드는 다음과 같습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="spreadjs culture" content="ko-kr" />
    <title>스프레드시트 디자이너</title>
    <link href="css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" type="text/css" />
    <link href="css/gc.spread.sheets.designer.x.x.x.min.css" rel="stylesheet" type="text/css">
</head>
<body unselectable="on">
    <div id="gc-designer-container" role="application"></div>
    <script type="text/javascript" src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.print.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {

            //라이선스 키 설정하기
            //GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
            //GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';

            var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
        }
    </script>
</body>
</html>

HTML 파일로 저장하세요. 예를 들어, ‘index.html’로 저장하면 됩니다.
HTML 파일을 저장한 동일한 위치에 새 폴더를 만들고, 3단계와 4단계에서 언급한 스크립트 및 CSS 파일을 해당 폴더에 추가하세요.
브라우저에서 HTML 파일을 열어 새 스프레드시트와 함께 디자이너 컴포넌트를 확인하세요.

기존 스프레드시트와 함께 디자이너 컴포넌트 사용하기

디자이너 컴포넌트는 기존 스프레드시트와도 함께 사용할 수 있습니다. 예를 들어, 아래 이미지는 트리맵 차트와 해당 데이터가 포함된 스프레드시트를 보여줍니다.

위 스프레드시트와 함께 디자이너 컴포넌트를 사용하려면, 기존 HTML 파일에 아래 단계를 적용하세요:

디자이너 컴포넌트 스크립트 및 CSS 파일 참조를 포함하세요.

<!--디자이너 컴포넌트 CSS 파일--> 
<link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />

<!--디자이너 컴포넌트 스크립트 파일-->
<script src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>

참고: 앞서 설명한 것처럼 스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.

디자이너 컴포넌트를 초기화할 때 스프레드시트 변수를 매개변수로 전달하세요.
```
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost", null, spread);
```

시트 DOM 요소와 함께 디자이너 컴포넌트의 DOM 요소를 포함하세요.

<div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>

아래는 기존 스프레드시트에 데이터를 추가하고 트리맵 차트를 생성한 후, 해당 스프레드시트를 디자이너 컴포넌트와 함께 사용하여 UI 작업을 수행하는 HTML 파일의 전체 코드 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="spreadjs culture" content="ko-kr" />

    <title>스프레드시트 디자이너</title>    
    <!--CSS 파일--> 
    <link href="css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" type="text/css" />
    <!--디자이너 컴포넌트 CSS 파일--> 
    <link href="css/gc.spread.sheets.designer.x.x.x.min.css" rel="stylesheet" type="text/css">

    <!--스크립트 파일-->
    <script type="text/javascript" src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.print.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.x.x.x.min.js"></script>
    <!--디자이너 컴포넌트 JS 파일--> 
    <script type="text/javascript" src="scripts/gc.spread.sheets.designer.resource.ko.x.x.x.min.js"></script>
    <script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js"></script>

    <script>
        $(document).ready(function () {
            // Spread 초기화
            var spread = new GC.Spread.Sheets.Workbook("ss");
            // 활성 시트 가져오기
            var sheet = spread.getSheet(0);
            // 열 너비 설정
            sheet.setColumnWidth(2, 100);
            sheet.setColumnWidth(4, 100);
            // 데이터 배열 생성
            var dataArray =
                [
                    ['Region', 'Subregion', 'country', 'Population'],
                    ['Asia', 'Southern', 'India', 1354051854],
                    [, , 'Pakistan', 200813818],
                    [, , 'Bangladesh', 166368149],
                    [, , 'Others', 170220300],
                    [, 'Eastern', 'China', 1415045928],
                    [, , 'Japan', 127185332],
                    [, , 'Others', 111652273],
                    [, 'South-Eastern', , 655636576],
                    [, 'Western', , 272298399],
                    [, 'Central', , 71860465],
                    ['Africa', 'Eastern', , 433643132],
                    [, 'Western', , 381980688],
                    [, 'Northern', , 237784677],
                    [, 'Others', , 234512021],
                    ['Europe', , , 742648010],
                    ['Others', , , 1057117703]
                ];
            // 배열 설정
            sheet.setArray(1, 1, dataArray);
            var treemapChart = sheet.charts.add('chart1',
            GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
            
            // 디자이너 컴포넌트를 초기화하고, 위에서 생성한 스프레드시트 컴포넌트를 사용하세요.
            var designer = new GC.Spread.Sheets.Designer.Designer("designerHost", null, spread);

        });
    </script>
</head>
<body>
    <div id="ss"></div>
    <!--디자이너 컴포넌트 DOM 요소-->
    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>
</html>

위 코드를 실행하면 아래와 같이 나타납니다.

빠른 시작

새 스프레드시트와 함께 디자이너 컴포넌트 사용하기

기존 스프레드시트와 함께 디자이너 컴포넌트 사용하기

제품

고객 서비스

메시어스 정보

정책(Policy)