Use the following steps to add the client widget to a browser page.
- 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> - Add the Spread.Sheets 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> - 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"/> - Add the product license. For example,
GC.Spread.Sheets.LicenseKey = “xxx”; - Implement the initialization and any other code. This example initializes the Spread.Sheets 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>
- Create the DOM element that is the target of the Spread.Sheets widget.
JavaScript Copy Code<div id="ss" style="height: 500px; width: 800px"></div> </body> </html>
 |
<!DOCTYPE html> is required to view the widget properly. |