SpreadJS Documentation
Adding the Client Widget to a Browser Page
SpreadJS Documentation > Developer's Guide > Getting Started > Adding the Client Widget to a Browser Page

Use the following steps to add the client widget to a browser page.

  1. Add the JavaScript for the page. The following code is a general example.
    JavaScript
    Copy Code
    <!DOCTYPE html>
     <html>
     <head>
         <title>Spread HTML test page</title>
    
  2. Add the SpreadJS scripts. Spread provides minified and debug versions of the scripts. The gc.spread.sheets.all.xxxx.min.js supports all the functions of Spread.

    <script src="[Your_Scripts_Path]/gc.spread.sheets.all.xxxx.min.js" type="text/javascript"></script>

  3. Add the CSS files to change the appearance. Use the gc.spread.sheets.xxxx.css file for a default appearance (effects the style of the scroll bar, the style of the filter dialog and child elements, cells, and tab strip).

    //<link href="[Your_CSS_Path]/gc.spread.sheets.xxxx.css" rel="stylesheet" type="text/css"/>
    //OR
    <link href="[Your_CSS_Path]/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="[Your_CSS_Path]/bootstrap/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>

  4. Add the product license. For example, GC.Spread.Sheets.LicenseKey = “xxx”;
  5. Implement the initialization and any other code. This example initializes the SpreadJS widget in a DOM element with an id of 'ss'.
    JavaScript
    Copy Code
    <script type="text/javascript">
    // Add your license
    GC.Spread.Sheets.LicenseKey = “xxx”;
    // Add your code
    window.onload = function(){
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
    var sheet = spread.getActiveSheet();                              
    }
        </script>
    </head>
    <body>
    
  6. Create the DOM element that is the target of the SpreadJS widget.
    JavaScript
    Copy Code
    <div id="ss" style="height: 500px; width: 800px"></div>
    </body>
    </html>
    
<!DOCTYPE html> is required to view the widget properly.