FortuneSheet
FortuneSheet是一款开箱即用的类似Excel和Google Sheets的javascript表格组件。
[](https://circleci.com/gh/ruilisi/fortune-sheet)
[](https://snyk.io/test/github/ruilisi/fortune-sheet)
[](https://github.com/umijs/father/)
[](https://xiemala.com/)
[English](./README.md) | 简体中文
## 目的
`FortuneSheet`的目标是制造一个功能丰富，配置简单的在线表格组件，开箱即用。
本项目源于 [Luckysheet](https://github.com/mengshukeji/Luckysheet)，并继承了它的很多代码。我们为将其转换为typescript做了很多努力，并且解决了一些原项目设计层面的问题。
我们的目标是让`FortuneSheet`越来越强大，同时易于维护。
## 交流
* [Discord](https://discord.gg/vHGwMB77w5) 英文社群
* [QQ](https://jq.qq.com/?_wv=1027&k=iHaSN47J) 中文社群
* [Xiemala](https://xiemala.com/s/ctJmUn)
## 在线样例
项目的在线Demo：[fortune-sheet-demo](https://ruilisi.github.io/fortune-sheet-demo/)
## 注意
在稳定版1.0发布之前，输入的数据结构和API可能会发生变动。如果你在升级版本后遇到了错误，可以查看[Changelog](./CHANGELOG.md) 和 [迁移指南](#迁移luckysheet数据).
## 对Luckysheet的改进
- 完全使用typescript编写。
- 可以用 `import` / `require` 导入本库了。
```js
import { Workbook } from '@fortune-sheet/react'
```
- 同页面支持多个实例。
- 去掉了 `jQuery` 的依赖, 用原生 `React` / `Vue` + `immer` 来管理Dom和状态。
- 用一个forked [handsontable/formula-parser](https://github.com/handsontable/formula-parser) 来处理公式计算。
- 优化dom结构。
- 用SVG代替`iconfont`的图标，因为`iconfont`的图标对其他开发者而言很不方便改动。
- 容器外面不创建可见的页面元素。
- 避免在`window`对象上存储数据。
## 特性
- 数据结构总体兼容Luckysheet (见[迁移指南](#迁移luckysheet数据))。
- **格式设置**：样式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式
- **单元格**：多选区，合并单元格
- **行和列操作**：插入、删除行或列
- **操作体验**：复制、粘贴、剪切，快捷键
- **公式和函数**：内置公式
## 开发路线
- ✅ 支持协同编辑和后端存储.
- ✅ 支持撤销/重做.
- ✅ 手机端适配.
- ✅ 开放API.
- ✅ 增加测试代码.
- 更多基础功能:
- ✅ 下拉填充
- ✅字体
- ✅ 格式刷
- ✅ 评论
- ✅ 插入图片
- ✅ 更多工具栏按钮
- Excel 导入和导出.
- 支持Vue.
- 更多功能:
- ✅ 排序
- ✅ 筛选
- ✅ 事件钩子
- ✅ 条件格式
- ✅ 拖拽
- ✅ 查找和替换
- 定位
- ✅ 数据验证
- ✅ 冻结
- ✅ 隐藏、冻结，文本分列
- 更多高级功能:
- 数据透视表
- 图表
- ✅ 截图
## 文档
请参考详细文档 [fortune-sheet-doc](https://ruilisi.github.io/fortune-sheet-docs/)
## 快速开始 (react)
### 安装库
使用 npm
```shell
npm install @fortune-sheet/react
```
使用 pnpm
```shell
pnpm install @fortune-sheet/react
```
使用 yarn
```shell
yarn add @fortune-sheet/react
```
### 创建一个HTML容器
```html
```
**注意**: `width` 和 `height` 不是一定要设为 100%, 但要有值. 如果设为 `auto`, 表格区域有可能不显示.
### 渲染表格
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"
ReactDOM.render(
,
document.getElementById('root')
);
```
### 后端存储和在线协同
每当用户在表格上做操作，一个`Op`列表会通过`onOp`回调发出。op描述了如何从当前数据修改为用户操作后的新数据的步骤。例如，当用户在A2单元格上设置了加粗，生成的op如下：
```json
[
{
"op": "replace",
"index": "0",
"path": ["data", 1, 0, "bl"],
"value": 1
}
]
```
op对后端数据修改和同步在线协同数据非常有用。
我们在 `backend-demo` 目录中展示了一个例子，使用 `Express` (后端) and `MongoDB` (数据库) 实现。
通过 `node index.js` 运行后端服务器，然后访问 [Collabration example](https://ruilisi.github.io/fortune-sheet-demo/?path=/story/collabration--example) 即可体验。(可通过 http://localhost:8081/init 初始化数据)
详细的 `Op` 文档, 请参考 [fortune-sheet-doc](./docs/zh/guide/op.md)
## 迁移Luckysheet数据
FortuneSheet的总体数据结构与Luckysheet相同，只有几处命名的区别：
1. sheet.index -> sheet.id
2. sheet.calcChain[].id -> sheet.calcChain[].id
## 贡献
期望的工作流程为: Fork -> Patch -> Push -> Pull Request
请确保仔细阅读 [贡献指南](./docs/zh/guide/contribute.md)。
## 开发
### 安装
```shell
yarn
```
### 开发
```shell
yarn dev
```
### 打包
```shell
yarn build
```
## 许可
本项目使用MIT许可. 在 [MIT](http://opensource.org/licenses/MIT) 查看完整文本。