English | 中文
npm i --save excel-collab
- 创建 React 应用
npm create vite@latest my-app -- --template react-ts
cd my-app
npm i
- 安装依赖
npm i --save excel-collab yjs
- 修改 main.tsx 文件
// src/main.tsx
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import { initController, StateContext, Excel } from 'excel-collab';
import Worker from 'excel-collab/worker?worker';
import 'excel-collab/style.css';
import * as Y from 'yjs';
const controller = initController({
worker: new Worker(),
doc: new Y.Doc(),
});
createRoot(document.getElementById('root')!).render(
<StrictMode>
<div style={{ height: '100vh' }}>
<StateContext value={{ controller }}>
<Excel />
</StateContext>
</div>
</StrictMode>,
);
- 启动应用
npm run dev
git clone https://github.com/nusr/excel.git
cd excel
npm i -g pnpm
pnpm i
cd demo/frontend && pnpm i && cd -
cd demo/backend && pnpm i && cd -
npm run dev
- 在线协作
- 创建文件
- 更改文件名
- Web Worker 解析公式
- OffScreenCanvas 渲染
- 撤销
- 重做
- 复制
- 剪切
- 粘贴
- 公式
- 字体
- 字号
- 字体颜色
- 填充颜色
- 加粗
- 斜体
- 删除线
- 下划线
- 边框
- 垂直对齐
- 水平对齐
- 文本换行
- 数字格式
- 自动筛选
- 合并单元格
- 图表
- 浮动图片
- 定义名称
- 插入行
- 插入列
- 删除行
- 删除列
- 隐藏行
- 隐藏列
- 行高
- 列宽
- 插入工作表
- 删除工作表
- 重命名工作表
- 隐藏工作表
- 取消隐藏工作表
- 导入 XLSX
- 导出 XLSX
- 导入 CSV
- 导出 CSV
- 暗黑模式
- 国际化
- ABS
- ACOS
- ACOSH
- ACOT
- ACOTH
- ASIN
- ASINH
- ATAN
- ATAN2
- ATANH
- AVERAGE
- COS
- COT
- EXP
- INT
- PI
- SIN
- SUM
- CHAR
- CODE
- CONCAT
- CONCATENATE
- LEN
- LOWER
- SPLIT
- T
- TEXT
- TRIM
- UNICHAR
- UNICODE
- UPPER