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

Initializing SpreadJS

After adding references in the code editor, follow the steps below to initialize SpreadJS.

  1. Add the following code which creates the SpreadJS target DOM element.

  2. Initialize SpreadJS in spread-container using any one of the following ways:

    1. Using document method to pick host DOM element.

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

    2. Using the DOM ID directly.

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

  3. Save it as an HTML file. For example, ‘index.html’. The HTML page will now look like this:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Add SpreadJS Script file-->
    <script type="text/javascript" src="SpreadJS\gc.spread.sheets.all.x.x.x.min.js"></script>

    <!-- Add SpreasdJS CSS File-->
    <link href="SpreadJS\gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1>SpreadJS</h1>
    <p>This section goes over how to initialize SpreadJS</p>
    <!-- Create SpreadJS's target DOM element, HTML DIV with id ss-->
    <div id="ss" style="width:100%;height:80vh;border:1px solid darkgray"></div>
</body>
<script>
    window.onload = function () {
        // Initialize SpreadJS by host DIV element.
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));

        // Alternatively, initialize SpreadJS using the DOM ID directly
        // var spread = new GC.Spread.Sheets.Workbook("ss");
    };
</script>
</html>

  4. Open the HTML file in browser to view the SpreadJS widget.

image