快速入门

下面的快速入门内容帮助您在本地快速搭建第一个基于 SpreadJS 表格组件的应用。

您可以从这里获得脚本和css文件引用的最新文件。

使用 CLI 脚手架快速创建

通过使用 spreadjs-cli 前端脚手架工具，可以：

快速建立基于 SpreadJS 的在线类 Excel 应用初始 Demo
通过模板选择 Vue2/Vue3/React 多种原型版本
可选择是否在原型中创建带有表格编辑器插件（Designer) 的 Demo

type=warning
注意：运行脚手架工具，需要安装 Node.JS ，推荐安装最新版本，脚手架支持14.20.x以后的 Node 版本

使用步骤：

安装 spreadjs-cli 脚手架工具
注：如果使用 npx 方式运行，可跳过此步骤
```
npm install -g spreadjs-cli
```

通过 spreadjs-cli 创建 demo（自动建立目录）

spreadjs-cli create my-first-demo

或

npm spreadjs-cli create my-first-demo

选择模板原型

✔ Loading list...
? Please choose which template for your first SpreadJS demo? (Use arrow keys)
> PureJS-with-Designer
  Vue3
  Vue3-with-Designer
  Vue2
  Vue2-with-Designer
  React
  React-with-Designer

进入目录，并运行
```
cd my-first-demo
npm run start
```
有以下提示，即可在浏览器打开

如下图所示：

使用 NPM 安装

SpreadJS 可以使用 npm 安装。将 @grapecity-software/spread-sheets 和 @grapecity-software/spread-sheets-resources-zh 包安装到您的项目中并引用样式和 JS 库。

您可以通过从命令行运行以下命令来从 npm 安装最新版本的 SpreadJS：

npm install @grapecity-software/spread-sheets
npm install @grapecity-software/spread-sheets-resources-zh

使用 import 导入所需的包

// SpreadJS
import * as GC from '@grapecity-software/spread-sheets'; 

// 资源文件
import '@grapecity-software/spread-sheets-resources-zh';

// SpreadJS 插件
import '@grapecity-software/spread-sheets-pivots';
import '@grapecity-software/spread-sheets-charts';

传统 HTML 方式

请按照以下步骤创建一个 HTML 页面来查看 SpreadJS 表格组件：

代码编辑器，如 VSCode
添加以下代码，其中：
- a) 添加 SpreadJS js 库和 css 文件的引用，存放在与 HTML 页面平级的 spreadjs-library 目录中
- b) 创建 SpreadJS DOM 容器
- c) 初始化 SpreadJS 实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="spreadjs culture" content="zh-cn" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- a) 添加SpreadJS脚本和CSS-->
    <!-- a1) 添加SpreadJS脚本文件-->
    <script type="text/javascript" src="spreadjs-library\gc.spread.sheets.all.16.1.4.min.js"></script>
    <script type="text/javascript" src="spreadjs-library\gc.spread.sheets.resources.zh.16.1.4.min.js"></script>

    <!-- a2) 添加CSS文件-->
    <link href="spreadjs-library\gc.spread.sheets.16.1.4.css" rel="stylesheet" type="text/css" />

    <style>
        .spread-container {
            height: 550px;
        }
    </style>
</head>
<body>
    <h1>葡萄城 SpreadJS 纯前端表格</h1>
    <p>使用 html + js 方式创建 SpreadJS 实例</p>
    <div class="sample-container">
        <!-- b) 创建SpreadJS的目标DOM元素，id为ss的HTML DIV-->
        <div id="ss" class="spread-container"></div>
    </div>
</body>
<script>
    <!--  c) 通过div的id“ss”在初始化 SpreadJS 实例-->
    window.onload = function ()
    {
        var spread = new GC.Spread.Sheets.Workbook(
            document.getElementById( "ss" ),
            { sheetCount: 1 }
        );
    };
</script>
</html>

将其保存为HTML文件，例如：index.html

拷贝所需的 JS 和 CSS 文件

在保存 HTML 文件的位置创建 “spreadjs-library” 文件夹
- 添加以下 js 和 css 文件到 “spreadjs-library” 文件夹（xx.x.x 表示产品版本号，这里使用 16.1.4）
  - gc.spread.sheets.all.xx.x.x.min.js
  - gc.spread.sheets.resources.zh.xx.x.x.min.js
  - gc.spread.sheets.xx.x.x.css

在浏览器中打开 HTML 文件以查看效果

在框架中使用，如 Vue / React / Angular

请参考：框架中开发