[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

SpreadJS 초기화

코드 편집기에 참조를 추가한 후, 아래 단계를 따라 SpreadJS를 초기화하세요.

  1. 다음 코드를 추가하여 SpreadJS의 대상 DOM 요소를 생성합니다.

  2. 아래 방법 중 하나를 선택해 spread-container 내에서 SpreadJS를 초기화합니다.

    1. document 메서드를 이용해 DOM ID를 가져오기.

      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });

    2. DOM ID를 직접 지정하여 사용하기.

      var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });

  3. 예를 들어 ‘index.html’이라는 이름으로 HTML 파일로 저장하세요. HTML 페이지는 다음과 같은 형태가 됩니다:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- a) SpreadJS 스크립트 및 CSS 추가-->
    <!-- a1) SpreadJS 스크립트 파일 추가-->
    <script type="text/javascript"
            src="SpreadJS\gc.spread.sheets.all.x.x.x.min.js"></script>

    <!-- a2) CSS 파일 추가-->
    <link href="SpreadJS\gc.spread.sheets.x.x.x.css"
          rel="stylesheet"
          type="text/css" />
    <style>
        .spread-container {
            height: 550px;
        }
    </style>
</head>
<body>
    <h1>SpreadJS</h1>
    <p>This section goes over how to initialize SpreadJS</p>
    <div class="sample-container">
        <!-- b) SpreadJS가 사용할 대상 DOM 요소로 id가 ss인 HTML DIV를 만드세요.-->
        <div id="ss" class="spread-container"></div>
    </div>
</body>
<script>
    // c) id가 "ss"인 div를 통해 spread-container 내에서 SpreadJS를 초기화합니다.
    window.onload = function ()
    {
        var spread = new GC.Spread.Sheets.Workbook(
            document.getElementById( "ss" ),
            { sheetCount: 1 }
        );

        // 또는 DOM ID를 직접 사용하여 SpreadJS를 초기화하세요.
        // var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });
    };
</script>
</html>

  4. HTML 파일을 브라우저로 열어 SpreadJS 위젯을 볼 수 있습니다.

ASP.NET 웹 애플리케이션

SpreadJS 위젯을 보기 위해 ASP.NET 웹 애플리케이션을 생성할 수도 있습니다:

  1. Visual Studio에서 빈 ASP.Net 웹 애플리케이션을 생성하세요.

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

    gc.spread.sheets.all.x.x.x.min.js

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

    gc.spread.sheets.excelio.x.x.x.min.js

  3. 프로젝트 루트 위치에 ‘css’ 폴더를 만들고 다음 CSS 파일을 포함하세요:

    gc.spread.sheets.x.x.x.css

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

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

    1. SpreadJS 스크립트 및 CSS 파일 참조를 추가하세요.

    2. SpreadJS 대상 DOM 요소를 생성하세요.

    3. 다음 방법 중 하나를 사용하여 spread-container에서 SpreadJS를 초기화하세요:

      1. document 메서드를 이용해 DOM ID 가져오기.

        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });

      2. DOM ID를 직접 사용하기.

        var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- a:- 스크립트 및 CSS 파일 추가-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
    <link href="css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
    <script>
        $( document ).ready( function ()
        {
             // 주의: 워크북 초기화 전에 반드시 이곳에 라이선스 키를 설정해야 합니다.
             // GC.Spread.Sheets.LicenseKey = " [배포 라이선스 키를 여기에 넣으세요]";

            // c:- id가 "ss"인 div를 통해 spread-container 내에서 SpreadJS를 초기화합니다.
            // Spread 초기화
            var spread = new GC.Spread.Sheets.Workbook( document.getElementById( "ss" ) );

            // 또는 DOM ID를 직접 사용하여 SpreadJS를 초기화하세요.
            var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });

            // 활성 시트 가져오기
            var sheet = spread.getActiveSheet();
        } );

    </script>
</head>
<body>
    <h1>SpreadJS</h1>
    <p>This section initializes SpreadJS</p>
    <!-- b:- SpreadJS의 대상 DOM 요소인 id가 ss인 HTML DIV를 생성하세요.-->
    <div id="ss" style="height:700px;width:900px"></div>
</body>
</html>

  6. 브라우저에서 HTML 페이지를 열어 SpreadJS 위젯을 확인하세요.