# SpreadDesigner

**Repository Path**: GrapeCity/SpreadDesigner

## Basic Information

- **Project Name**: SpreadDesigner
- **Description**: 
您可以直接将类Excel的强大功能嵌入到应用系统中，无需任何编码便可在Spread设计器中实现数据分组、公式计算、条件格式、图表效果等复杂功能的表格应用开发。您更可以将其免费部署到最终用户端，帮助用户编辑和定制Spread模板，分析处理数据。 
- **Primary Language**: C#
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://www.gcpowertools.com.cn/products/spread_winforms.htm
- **GVP Project**: No

## Statistics

- **Stars**: 165
- **Forks**: 51
- **Created**: 2014-09-10
- **Last Updated**: 2026-07-01

## Categories & Tags

**Categories**: reporting-tools

**Tags**: None

## README

# SpreadDesigner

SpreadDesigner 是基于葡萄城商业产品 [SpreadJS](https://www.grapecity.com.cn/developer/spreadjs) 能力构建的在线表格编辑器开源示例。项目以纯前端方式在浏览器中提供类 Excel 的电子表格编辑体验，展示如何将 SpreadJS 的运行时表格、文件导入导出、公式计算、样式编辑和数据绑定能力嵌入到业务系统中。

在线表格编辑器是 SpreadJS 的核心能力之一，可直接集成到 Angular、React、Vue 等前端框架或原生 JavaScript 应用中。它提供开放 API 和类 Excel 的 UI 交互元素，适用于模板设计、在线填报、报表编辑、协同业务录入和企业数据资产线上化等场景。

![SpreadJS Runtime Web Excel 运行截图](docs/runtime-web-excel-demo.png)

## 项目价值

- 打破数据孤岛，加速资产线上化：在尽量不改变用户 Excel 使用习惯的前提下，将线下分散的表单、报表和模板平滑迁移到 Web 端，帮助业务数据统一采集、统一入库、统一管理。
- 横向赋能多业务场景：覆盖协同编辑、数据填报、报表设计等企业高频场景，可嵌入 ERP、CRM、WMS、MES、OA、财务系统、供应链系统等核心信息化平台。
- 降低系统二次开发成本：通过 SpreadJS 提供的表格 API、文件 IO、公式引擎和样式能力，快速构建类 Excel 模块，减少从零开发表格编辑器的工作量。
- 保留最终用户操作习惯：提供接近 Excel 的编辑、格式、公式、工作表、筛选排序和导入导出体验，降低业务人员学习成本。

## 核心能力

### 纯前端独立渲染

SpreadJS 基于 HTML5 Canvas 渲染，并使用稀疏数组等结构优化表格数据存储。表格编辑、样式绘制、公式计算、文件解析和交互响应主要在浏览器端完成，可减少后端依赖，适合嵌入各种 Web 应用。

### 深度兼容 Excel

SpreadJS 在 Web 端复刻常见 Excel 能力，支持 450 多种公式函数、数据透视表、32 种图表以及丰富的单元格样式、条件格式、数据验证和文件导入导出能力，便于复用企业已有 Excel 模板和报表资产。

### 开放 API 与二次扩展

项目可通过 SpreadJS API 操作工作簿、工作表、单元格、公式、样式、表格、筛选、排序、导入导出和数据绑定逻辑。开发者可以根据业务系统需要封装权限控制、审批流程、数据校验、模板管理、版本管理和服务端保存能力。

## 示例功能

当前仓库是一个基于 SpreadJS Runtime 的轻量级 Web Excel 示例，核心代码位于 `src/main.js` 和 `src/styles.css`。示例内置了类似 Excel Ribbon 的工具栏，包含以下能力：

- 文件操作：新建工作簿、打开 Excel/JSON、导出 Excel、导出 SpreadJS JSON。
- 编辑操作：撤销、重做、剪切、复制、粘贴、清除内容。
- 单元格样式：字体、字号、加粗、斜体、下划线、文字颜色、填充颜色、对齐、自动换行、合并单元格。
- 数据处理：数字格式、小数位调整、筛选、升序/降序排序、删除重复项。
- 表格结构：插入/删除行列、新增/删除/重命名工作表、插入表格。
- 公式能力：公式栏、自动求和、平均值、重新计算、显示/隐藏公式。
- 视图控制：冻结窗格、显示/隐藏网格线、显示/隐藏行列标题、缩放。
- 交互组件：插入日期、插入复选框、底部状态栏和选区统计。

## 典型应用场景

### 协同编辑

将在线表格能力嵌入业务系统后，可结合账号体系、权限模型、实时通信和服务端存储，构建多人在线编辑、数据同步、历史版本和审批流等功能。

### 数据填报

适用于预算填报、生产日报、销售计划、巡检记录、绩效录入、供应商数据采集等业务。通过模板设计、数据验证、单元格绑定和导入导出能力，可让业务用户继续使用熟悉的表格式录入方式。

### 报表设计

可复用企业已有 Excel 模板，在线完成报表设计、公式计算、样式调整和数据绑定，再与后端接口、数据库或 BI 平台连接，实现报表生成和数据分析。

## 技术栈

- [Vite](https://vite.dev/)：本地开发与构建工具。
- 原生 JavaScript：示例应用入口和交互逻辑。
- `@grapecity-software/spread-sheets`：SpreadJS 表格运行时。
- `@grapecity-software/spread-sheets-io`：Excel/JSON 文件导入导出。
- `@grapecity-software/spread-sheets-resources-zh`：中文资源。
- `lucide`：工具栏图标。

## 快速开始

### 环境要求

建议使用 Node.js 18 或更高版本。

### 安装依赖

```bash
npm install
```

### 启动开发服务

```bash
npm run dev
```

默认会启动本地 Vite 服务。启动后在浏览器中打开终端输出的地址即可访问示例。

### 构建生产产物

```bash
npm run build
```

### 预览构建结果

```bash
npm run preview
```

## 目录结构

```text
.
├── docs/
│   └── runtime-web-excel-demo.png
├── src/
│   ├── main.js
│   └── styles.css
├── index.html
├── package.json
├── package-lock.json
├── LICENSE
└── README.md
```

- `index.html`：Vite 应用入口，挂载前端应用。
- `src/main.js`：SpreadJS 工作簿初始化、工具栏 UI、表格操作和文件导入导出逻辑。
- `src/styles.css`：页面布局、Ribbon 工具栏、公式栏、工作区和状态栏样式。
- `docs/runtime-web-excel-demo.png`：项目运行截图。

## 嵌入业务系统

在实际项目中，可以将 SpreadJS 工作簿实例作为业务页面的一部分进行封装，并通过 API 与后端数据交互：

```js
import * as GC from '@grapecity-software/spread-sheets';
import '@grapecity-software/spread-sheets-io';
import '@grapecity-software/spread-sheets-resources-zh';

GC.Spread.Common.CultureManager.culture('zh-cn');

const spread = new GC.Spread.Sheets.Workbook(document.querySelector('#spreadHost'), {
  sheetCount: 1,
  tabStripVisible: true,
  allowUserZoom: true,
  allowUserResize: true,
  allowCopyPasteExcelStyle: true,
});

const sheet = spread.getActiveSheet();
sheet.setValue(0, 0, '业务数据');
```

你可以在此基础上扩展：

- 通过接口加载模板和业务数据。
- 使用 `spread.toJSON()` 保存工作簿状态。
- 使用 `spread.fromJSON()` 恢复模板或历史版本。
- 使用 `spread.import()` 导入 Excel 文件。
- 使用 `spread.export()` 导出 Excel 文件。
- 结合业务规则实现单元格权限、数据校验、审批流和版本管理。

## 资源链接

- SpreadJS 官网：https://www.grapecity.com.cn/developer/spreadjs
- SpreadJS 下载：https://www.grapecity.com.cn/developer/spreadjs/download
- 在线表格编辑器：https://www.grapecity.com.cn/developer/spreadjs/editor
- Angular 集成：https://www.grapecity.com.cn/developer/spreadjs/angular
- React 集成：https://www.grapecity.com.cn/developer/spreadjs/react
- Vue 集成：https://www.grapecity.com.cn/developer/spreadjs/vue
- 资源中心：https://www.grapecity.com.cn/developer/spreadjs/help#resources
- 葡萄城 AI 搜索：https://ai-assist.grapecity.com.cn/

## 许可说明

本仓库代码遵循 [Apache-2.0 License](LICENSE)。

SpreadJS 是葡萄城商业产品。项目中使用的 SpreadJS 相关 npm 包和产品能力，请根据葡萄城官方授权协议在合法授权范围内使用。