SpreadJS 14
Getting Started / Quick Start
In This Topic
    Quick Start
    In This Topic

    The following quick start section helps you to view SpreadJS widget in a browser. For information on adding references, see ‘Getting Started’ topic.
    You can get the latest files for scripts and css file references from here.

    Create HTML Page

    Please follow the below steps to create an HTML page to view SpreadJS widget:

    1. Open ‘Notepad’ or your preferred code editor.
    2. Add the following code which:
      a. Adds reference of SpreadJS script and css files
      b. Creates SpreadJS target DOM element
      c. Initializes SpreadJS in spread-container using any one of the following ways:
        i. Using document method to pick DOM ID.
         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
        ii. Using the DOM ID directly.
         var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });
      HTML
      Copy Code
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <!-- a) Add SpreadJS Script and CSS-->
          <!-- a1) Add SpreadJS Script file-->
          <script type="text/javascript"
                  src="SpreadJS\gc.spread.sheets.all.x.x.x.min.js"></script>
      
          <!-- a2) Add CSS File-->
          <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) Create SpreadJS's target DOM element, HTML DIV with id ss-->
              <div id="ss" class="spread-container"></div>
          </div>
      </body>
      <script>
          // c) Initialize SpreadJS in spread-container by div's id "ss"
          window.onload = function ()
          {
              var spread = new GC.Spread.Sheets.Workbook(
                  document.getElementById( "ss" ),
                  { sheetCount: 1 }
              );
      
              // Alternatively, initialize SpreadJS using the DOM ID directly
              // var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });
          };
      </script>
      </html>
      

    3. Save it as an HTML file. For example, ‘index.html’
    4. Create ‘SpreadJS’ folder at the same location where you have saved the HTML file. Add following script and css files to ‘SpreadJS’ folder:
      gc.spread.sheets.all.x.x.x.min.js
      gc.spread.sheets.x.x.x.css
    5. Open the HTML file in browser to view SpreadJS widget.
       

    ASP.NET Web Application

    Please follow below steps to create an ASP.NET Web application to view SpreadJS widget:

    1. Create an Empty ASP.Net Web Application in Visual Studio.
    2. Create 'scripts' folder in your project's root location and include following script file:
      gc.spread.sheets.all.x.x.x.min.js
      To add export functionality, add following additional script file:
      gc.spread.sheets.excelio.x.x.x.min.js
    3. Create 'css' folder in your project's root location and include following css:
      gc.spread.sheets.x.x.x.css
    4. Add an HTML Page to Visual Studio project.
    5. Modify the content of the added HTML Page to:
      a. Add reference of SpreadJS script and css file
      b. Create SpreadJS target DOM element
      c. Initialize SpreadJS in spread-container by using any of the following ways:
        i. Using document method to pick DOM ID.
         var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
        ii. Using the DOM ID directly.
         var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 1 });
      HTML
      Copy Code
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      
          <!-- a:- Add Script & css file-->
          <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 ()
              {
                   // Note: Apply license key here, before the Workbook is initialized
                   // GC.Spread.Sheets.LicenseKey = " [your Distribution license key here]";
      
                  // c:- Initialize SpreadJS in spread-container by div's id "ss"
                  // initializing Spread
                  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", { sheetCount: 1 });
      
                  // get the activesheet
                  var sheet = spread.getActiveSheet();
              } );
      
          </script>
      </head>
      <body>
          <h1>SpreadJS</h1>
          <p>This section initializes SpreadJS</p>
          <!-- b:- Create SpreadJS's target DOM element, HTML DIV with id ss-->
          <div id="ss" style="height:700px;width:900px"></div>
      </body>
      </html>
      

    6.  View the HTML Page in browser to view SpreadJS widget.

    Refer the following topics to get started with some of the commonly used SpreadJS features: