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

SpreadJS Libraries

You can load SpreadJS sub-libraries to use certain features without loading all the libraries.

Features

Required Libraries

Core

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

Calc Engine

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

Basic Functions

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.calcengine.basicfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

Advanced Functions

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

Cell Types

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

Cell States

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

Drag Merge

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.dragmerge.*.*.*.min.js

Auto Merge

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.automerge.*.*.*.min.js

Data Binding

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

Data Validation

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.datavalidation.*.*.*.min.js

Conditional Formatting

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

Drag Fill

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.fill.*.*.*.min.js

Filter

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

Outlines

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

Outline Column

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

Comment

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.comments.*.*.*.min.js

Threaded Comment

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.comments.*.*.*.min.js

gc.spread.sheets.components.*.*.*.min.js

gc.spread.sheets.threadedcomments.*.*.*.min.js

Touch

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.touch.*.*.*.min.js

Search

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.search.*.*.*.min.js

Print

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.print.*.*.*.min.js

PDF

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.print.*.*.*.min.js

gc.spread.sheets.pdf.*.*.*.min.js

Floating Object

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

Formula Textbox

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.formulatextbox.*.*.*.min.js

Barcode

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.sparklines.*.*.*.min.js

gc.spread.sheets.barcode.*.*.*.min.js

Hyperlink

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

gc.spread.sheets.hyperlink.*.*.*.min.js

Sparkline

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.sparklines.*.*.*.min.js

Shapes

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

Chart

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.charts.*.*.*.min.js

Data Chart

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.calcengine.basicfunctions.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.components.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.datacharts.*.*.*.min.js

Table

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js (optional, for formulas and filters)

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js (optional, for data-binding)

gc.spread.sheets.conditionalformatting.*.*.*.min.js (optional, for filtering)

gc.spread.sheets.filter.*.*.*.min.js (optional, for filtering)

gc.spread.sheets.tables.*.*.*.min.js

Slicer

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.slicers.*.*.*.min.js

Pivot Table

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.slicers.*.*.*.min.js

gc.spread.sheets.formulatextbox.*.*.*.min.js

TableSheet

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.automerge.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.tablesheet.*.*.*.min.js

GanttSheet

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.automerge.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.contextmenu.*.*.*.min.js

gc.spread.sheets.outlines.*.*.*.min.js

gc.spread.sheets.outlinecolumn.*.*.*.min.js

gc.spread.sheets.tablesheet.*.*.*.min.js

gc.spread.sheets.ganttsheet.*.*.*.min.js

ReportSheet

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.data.*.*.*.min.js

gc.spread.calcengine.basicfunctions.*.*.*.min.js

gc.spread.calcengine.advancedfunctions.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.tables.*.*.*.min.js

gc.spread.sheets.bindings.*.*.*.min.js

gc.spread.sheets.components.*.*.*.min.js

gc.spread.sheets.floatingobjects.*.*.*.min.js

gc.spread.sheets.sparklines.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.min.js

gc.spread.sheets.cellstate.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.conditionalformatting.*.*.*.min.js

gc.spread.sheets.datavalidation.*.*.*.min.js

gc.spread.sheets.filter.*.*.*.min.js

gc.spread.sheets.contextmenu.*.*.*.min.js

gc.spread.sheets.print.*.*.*.min.js

gc.spread.sheets.shapes.*.*.*.min.js

gc.spread.sheets.charts.*.*.*.min.js

gc.spread.sheets.datacharts.*.*.*.min.js

gc.spread.sheets.tablesheet.*.*.*.min.js

gc.spread.report.reportsheet.*.*.*.min.js

Context Menu

gc.spread.common.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.contextmenu.*.*.*.min.js

NameBox

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.namebox*.*.*.min.js

Statusbar

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.statusbar.*.*.*.js

User

gc.spread.common.*.*.*.min.js

AI(Basic)

gc.spread.common.*.*.*.min.js

gc.spread.calcengine.*.*.*.min.js

gc.spread.sheets.core.*.*.*.min.js

gc.spread.sheets.calcengine.*.*.*.min.js

gc.spread.sheets.celltypes.*.*.*.min.js

gc.spread.sheets.ai.*.*.*.min.js

The core js must always be loaded. The calcengine js must be loaded first to use functions. Many features use the calcengine js so you may wish to load it first. If you use a function from a js file that has not been loaded, the function does not take effect.

The js files are located in the modules folder under the main SpreadJS scripts folder.

Using Basic SpreadJS Functions

The following code sample shows how to use basic SpreadJS functions.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <script>
        // The Spread definition and most UI behavior is in the SpreadJS core library.
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var sheet = spread.getActiveSheet();
            sheet.setValue(0, 0, 20);
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

Using Basic Calc Functions

The following code sample shows how to use basic calc functions in the Spread worksheet.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine basic function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calceingine sheet function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.calcengine.x.x.x.min.js"></script>
    <script>      
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var sheet = spread.getActiveSheet();
            sheet.setArray(0, 0, [1, 2, 3, 4, 5]);
            sheet.setFormula(5, 1, 'SUM(A1,A5)');
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

Using Calc and Advanced Functions

The following code sample shows how to use calc and advanced functions.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine advanced function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.advancedfunctions.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calceingine sheet function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.calcengine.x.x.x.min.js"></script>
    <script>
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var activeSheet = spread.getActiveSheet();
            activeSheet.setValue(0, 0, 1);
            activeSheet.setValue(1, 0, 10);
            activeSheet.setValue(2, 0, 7);
            activeSheet.setValue(3, 0, 9);
            activeSheet.setValue(4, 0, "a1");
            activeSheet.setFormula(5, 0, "MAX(A1:A5)");
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

Using Binding Functions

The following code sample shows how to use binding functions.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable data binding library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.bindings.x.x.x.min.js"></script>
    <script>
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var activeSheet = spread.getActiveSheet();
             var people = [
                 { name: "Albert", isAdult: false, country: "American", website: "albert.com" },
                 { name: "Alice", isAdult: true, country: "China", website: "alice.com" },
                 { name: "Bob", isAdult: false, country: "Canada", website: "bob.com" }
             ];
             activeSheet.autoGenerateColumns = true;
             activeSheet.setDataSource(people);
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

Using Formula Text Box

The following code sample shows how to use the formula text box.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calcengine basic function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.calcengine.basicfunctions.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable calceingine sheet function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.calcengine.x.x.x.min.js"></script>
    <!--SpreadJS pluggable formula text box function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.formulatextbox.x.x.x.min.js"></script>
    <script>
        // The formula text box function is in the Spread formula tex box library. 
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var sheet = spread.getActiveSheet();
            sheet.setArray(0, 0, [1, 2, 3, 4, 5]);
            var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
            fbx.workbook(spread);
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
    <input type="text" id="formulaTextBox" />
</body>
</html>

Using Comment Functions

The following code sample shows how to use the comment functions.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
    <!--SpreadJS pluggable comment library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.comments.x.x.x.min.js"></script>
    <script>
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var sheet = spread.getActiveSheet();
            sheet.comments.add(5, 5, 'new comment!');
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>

Using FloatObject Functions

The following code sample shows how to use the FloatObject functions.

<!DOCTYPE html>
<html>
<head>
    <title>SpreadJS Pluggable Sample</title>
    <link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet"/>
    <!--SpreadJS pluggable common function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.common.x.x.x.min.js"></script>
    <!--SpreadJS pluggable core function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.core.x.x.x.min.js"></script>
   <!--SpreadJS pluggable floating objects function library-->
    <script type="text/javascript" src="./scripts/pluggable/gc.spread.sheets.floatingobjects.x.x.x.min.js"></script>
    <script>
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook("ss");
            var activeSheet = spread.getActiveSheet();
            var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 100, 100, 60, 64);
            var btn = document.createElement('button');
            btn.style.width = "60px";
            btn.style.height = "30px";
            btn.innerText = "button";
            customFloatingObject.content(btn);
            activeSheet.floatingObjects.add(customFloatingObject);
        };
    </script>
</head>
<body>
    <div id="ss" style="width:800px; height:600px; border: 1px solid gray;"></div>
</body>
</html>