[]
        
(Showing Draft Content)

빠른 시작

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

ChatGPT에게 묻기

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

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

HTML 페이지

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

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

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

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script>
        </script>
    </head>
    <body>
    </body>
    </html>
  3. HEAD 요소 태그 안에 다음 SpreadJS CSS 및 JS 파일을 추가하세요.

    <!--CSS files--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
    
    <!--Script files-->
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>    

    피벗 테이블 기능을 사용하려면 다음 추가 스크립트 파일을 포함하세요.

    <script src="scripts/gc.spread.pivot.pivottables.x.x.x.min.js" type="text/javascript"></script>
  4. HEAD 요소 태그 안에 다음 디자이너 컴포넌트의 CSS 및 JS 파일을 추가하세요.

    <!--CSS files--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    <!--Script files-->
    <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>

    참고: 스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.

    또한, 디자이너 컴포넌트 리소스 파일(gс.spread.sheets.designer.resource.ko.x.x.x.min.js, 이 경우)이 gc.spread.sheets.designer.all.x.x.x.min.js보다 항상 먼저 참조되어야 합니다.

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

    <body>
        <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
    </body>
  6. HEAD 섹션의 script 요소 안에서 디자이너 컴포넌트를 초기화하세요. 초기화 전에 디자이너 컴포넌트와 SpreadJS의 라이선스 키도 설정해야 합니다.

    <script>
        //라이선스 키 설정하기
        //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
        //GC.Spread.Sheets.LicenseKey = "XXXX";
    
        var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
    </script>

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

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
        <!--CSS 파일--> 
        <!--스프레드시트 CSS 파일--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
        <!--디자이너 컴포넌트 CSS 파일--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    
        <!--스크립트 파일-->
        <!--스프레드시트 JS 파일--> 
        <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
        <!--디자이너 컴포넌트 JS 파일--> 
        <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>
    
        <script>
            window.onload = function () {
    
                //라이선스 키 설정하기
                //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
                //GC.Spread.Sheets.LicenseKey = "XXXX";
    
                var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
            }
        </script>
    </head>
    <body>
        <!--DOM element-->
        <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
    </body>
    </html>
  7. HTML 파일로 저장하세요. 예를 들어, ‘index.html’로 저장하면 됩니다.

  8. HTML 파일을 저장한 동일한 위치에 새 폴더를 만들고, 3단계와 4단계에서 언급한 스크립트 및 CSS 파일을 해당 폴더에 추가하세요.

  9. 브라우저에서 HTML 파일을 열어 새 스프레드시트와 함께 디자이너 컴포넌트를 확인하세요.


    image.png

ASP.NET 웹 애플리케이션

다음 단계를 따라 새 스프레드시트와 함께 SpreadJS 디자이너 컴포넌트를 표시하는 ASP.NET 웹 애플리케이션을 만드세요.

  1. Visual Studio에서 빈 ASP.NET 웹 애플리케이션을 만드세요.

  2. 프로젝트 루트 위치에 ‘scripts’ 폴더를 생성한 후, 다음 스크립트 파일들을 포함하세요:

    // SpreadJS 스크립트 파일
    gc.spread.sheets.all.x.x.x.min.js
    gc.spread.sheets.charts.x.x.x.min.js
    gc.spread.sheets.shapes.x.x.x.min.js
    gc.spread.sheets.print.x.x.x.min.js
    gc.spread.sheets.barcode.x.x.x.min.js
    gc.spread.sheets.pdf.x.x.x.min.js
    gc.spread.sheets.tablesheet.x.x.x.min.js
    
    // SpreadJS 디자이너 컴포넌트 스크립트 파일
    gc.spread.sheets.designer.resource.ko.0.0.0.min.js
    gc.spread.sheets.designer.all.x.x.x.min.js

    스프레드시트 참조는 디자이너 컴포넌트 참조보다 위에 추가해야 합니다.

    또한, 디자이너 컴포넌트 리소스 파일(gc.spread.sheets.designer.resource.ko.x.x.x.min.js, 이 경우)은 gc.spread.sheets.designer.all.x.x.x.min.js보다 항상 먼저 참조되어야 합니다.

    피벗 테이블 기능을 사용하려면 다음 추가 스크립트 파일을 포함하세요.

    <script src="scripts/gc.spread.pivot.pivottables.x.x.x.min.js" type="text/javascript"></script>

    내보내기 기능을 추가하려면 다음 추가 스크립트 파일을 포함하세요:

    <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
  3. 프로젝트 루트 위치에 ‘css’ 폴더를 생성한 후, 다음 CSS 파일을 포함하세요:

    • SpreadJS CSS 파일 - gc.spread.sheets.x.x.x.css

    • SpreadJS 디자이너 컴포넌트 CSS 파일 - gc.spread.sheets.designer.x.x.x.min.css

  4. Visual Studio 프로젝트에 HTML 페이지를 추가하세요.

  5. 추가한 HTML 페이지의 내용을 다음 코드로 수정하세요:

    • 디자이너 컴포넌트 초기화하기

    • 디자이너 컴포넌트 대상 DOM 요소 생성하기

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
        <!--CSS 파일--> 
        <!--Spreadsheet CSS file--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
        <!--디자이너 컴포넌트 CSS 파일--> 
        <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />
    
        <!--스크립트 파일-->
        <!--스프레드시트 JS 파일--> 
        <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
        <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
        <!--디자이너 컴포넌트 JS 파일--> 
        <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>
    
        <script>
            window.onload = function () {
    
                //라이선스 키 설정하기
                //GC.Spread.Sheets.Designer.LicenseKey = "XXX";
                //GC.Spread.Sheets.LicenseKey = "XXXX";
    
                var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
            }
        </script>
    </head>
    <body>
        <!--DOM element-->
        <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
    </body>
    </html>
  6. 브라우저에서 HTML 파일을 열어 새 스프레드시트와 함께 디자이너 컴포넌트를 확인하세요.

    image.png

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

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



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

  1. 디자이너 컴포넌트 스크립트 및 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>

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

  2. 디자이너 컴포넌트를 초기화할 때 스프레드시트 변수를 매개변수로 전달하세요.

    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);
  3. 시트 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 name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    
    <!--CSS 파일--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.x.x.x.css" />
    <!--디자이너 컴포넌트 CSS 파일--> 
    <link rel="styleSheet" href="css/gc.spread.sheets.designer.x.x.x.min.css" />

    <!--스크립트 파일-->
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.tablesheet.x.x.x.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.excelio.x.x.x.min.js" type="text/javascript"></script>
    <!--디자이너 컴포넌트 JS 파일--> 
    <script src="scripts/gc.spread.sheets.designer.resource.en.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>

    <script>
        $(document).ready(function () {
            // Spread 초기화
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("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(document.getElementById("designerHost"), '', spread);

        });
    </script>
</head>
<body>
    <div id="ss"></div>
    <!--DOM element for designer components-->
    <div id="designerHost" style="width:100%; height:1000px;border: 1px solid gray;"></div>
</body>
</html>

위 코드는 아래와 같은 결과를 생성합니다: