[]
以下快速入门部分将帮助你在项目中结合新建电子表格和现有电子表格使用 SpreadJS 设计器组件（SpreadJS Designer Component）。你可以通过此链接下载设计器组件的最新脚本文件和 CSS 文件。有关添加引用的更多信息，请参阅《快速入门》主题。
注意：设计器组件（Designer Component）仅可与表格组件（sheets component）配合使用。如需了解如何使用表格组件，请参阅《快速开始》主题。
按照以下步骤创建 HTML 页面，以显示 SpreadJS 设计器组件及一个新建的电子表格。
打开「记事本」或你常用的代码编辑器。
向文件中添加以下 HTML 语法代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
</body>
</html>在 <HEAD> 标签内添加以下 SpreadJS CSS 文件和 JS 文件：
<!--CSS 文件-->
<link rel="styleSheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
<!--脚本文件-->
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.io.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.calcengine.languagepackages.x.x.x.min.js" type="text/javascript"></script>根据需求，你可以在此处引入用于不同附加功能的 JS 文件，例如条形码（barcodes）、数据透视表（pivot tables）、表格表（tablesheets）、甘特表（ganttsheets）、导入/导出（import/export）等。
在 <HEAD> 标签内添加以下设计器组件的 CSS 文件和 JS 文件：
<!--CSS 文件-->
<link rel="styleSheet" href="css/gc.spread.sheets.designer.light.x.x.x.min.css" />
<!--脚本文件-->
<script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>注意：电子表格引用必须添加在设计器组件引用之前。此外，设计器组件的资源文件（本例中为
gc.spread.sheets.designer.resource.en.x.x.x.min.js）必须始终在gc.spread.sheets.designer.all.x.x.x.min.js之前引用。
在 <BODY> 标签内添加一个 DOM 元素作为容器：
<body>
<div id="designerHost" style="width:100%; height:1000px; border: 1px solid gray;"></div>
</body>在 <HEAD> 部分的 <script> 标签内初始化设计器组件。同时，需在初始化前为设计器组件和 SpreadJS 设置许可证密钥（license key）：
<script>
window.onload = function () {
// 设置许可证密钥
//GC.Spread.Sheets.Designer.LicenseKey = "XXX";
//GC.Spread.Sheets.LicenseKey = "XXXX";
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
}
</script>HTML 文件中的完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS 文件-->
<link rel="styleSheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
<link rel="styleSheet" href="css/gc.spread.sheets.designer.light.x.x.x.min.css" />
<!--脚本文件-->
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.io.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.calcengine.languagepackages.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.resource.en.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>
<script>
window.onload = function () {
// 设置许可证密钥
//GC.Spread.Sheets.Designer.LicenseKey = "XXX";
//GC.Spread.Sheets.LicenseKey = "XXXX";
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
}
</script>
</head>
<body>
<div id="designerHost" style="width:100%; height:1000px; border: 1px solid gray;"></div>
</body>
</html>将文件保存为 HTML 格式，例如「index.html」。
在保存 HTML 文件的同一位置新建一个文件夹，将步骤 3 和步骤 4 中提到的脚本文件和 CSS 文件添加到该文件夹中。
在浏览器中打开该 HTML 文件，即可查看包含新建电子表格的设计器组件。
你也可以将设计器组件与任何现有电子表格配合使用。例如，下图展示了一个包含树形图（treemap chart）及其数据的电子表格：
若要将设计器组件与上述电子表格结合使用，请在现有 HTML 文件中执行以下步骤：
引入设计器组件的脚本文件和 CSS 文件引用：
<!--设计器组件 CSS 文件-->
<link rel="styleSheet" href="css/gc.spread.sheets.designer.lignt.x.x.x.min.css" />
<!--设计器组件脚本文件-->
<script src="scripts/gc.spread.sheets.designer.resource.cn.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>注意：如上文步骤所述，电子表格引用必须添加在设计器组件引用之前。
初始化设计器组件后，对电子表格初始化：
<script>
window.onload = function () {
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
// 初始化 Spread
var spread = designer.Spread;
// 获取活动表格
var sheet = spread.getSheet(0);
// 设置列宽
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(4, 100);
// 创建数据数组
var dataArray =
[
['Region', 'Subregion', 'country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
];
// 设置数组（将数据写入表格）
sheet.setArray(1, 1, dataArray);
// 在表格中添加树形图
var treemapChart = sheet.charts.add('chart1',
GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
}
</script>将设计器组件的 DOM 元素与表格 DOM 元素一同引入：
<div id="designerHost" style="width:100%; height:1000px; border: 1px solid gray;"></div>以下是 HTML 文件中的完整代码，其中现有电子表格会添加数据并创建树形图，该电子表格将进一步与设计器组件配合使用以执行任何 UI 操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS 文件-->
<link rel="styleSheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
<link rel="styleSheet" href="css/gc.spread.sheets.designer.light.x.x.x.min.css" />
<!--脚本文件-->
<script src="scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.barcode.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.shapes.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.charts.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.print.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.pdf.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.sheets.io.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/plugins/gc.spread.calcengine.languagepackages.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.resource.cn.x.x.x.min.js" type="text/javascript"></script>
<script src="scripts/gc.spread.sheets.designer.all.x.x.x.min.js" type="text/javascript"></script>
<script>
window.onload = function () {
var designer = new GC.Spread.Sheets.Designer.Designer("designerHost");
// 初始化 Spread
var spread = designer.Spread;
// 获取活动表格
var sheet = spread.getSheet(0);
// 设置列宽
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(4, 100);
// 创建数据数组
var dataArray =
[
['Region', 'Subregion', 'country', 'Population'],
['Asia', 'Southern', 'India', 1354051854],
[, , 'Pakistan', 200813818],
[, , 'Bangladesh', 166368149],
[, , 'Others', 170220300],
[, 'Eastern', 'China', 1415045928],
[, , 'Japan', 127185332],
[, , 'Others', 111652273],
[, 'South-Eastern', , 655636576],
[, 'Western', , 272298399],
[, 'Central', , 71860465],
['Africa', 'Eastern', , 433643132],
[, 'Western', , 381980688],
[, 'Northern', , 237784677],
[, 'Others', , 234512021],
['Europe', , , 742648010],
['Others', , , 1057117703]
];
// 设置数组（将数据写入表格）
sheet.setArray(1, 1, dataArray);
// 在表格中添加树形图
var treemapChart = sheet.charts.add('chart1',
GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
}
</script>
</head>
<body>
<div id="designerHost" style="width:100%; height:1000px; border: 1px solid gray;"></div>
</body>
</html>上述代码将生成以下效果：
