- 纯前端实现的电子表格组件,包含工具栏、公式栏占位、画布区域等基础布局。
- 默认创建 20 列、128 行的空表格,可加载自定义二维数组或带 vender 标识的完整表格数据。
- 支持本地缓存:点击工具栏「保存」会将当前数据存入
localStorage,下次自动恢复;「删除缓存」可清空本地数据;无缓存时默认读取assets/data/super-market-small.json示例数据。
- 基础交互:单/多选、框选、全选,支持行/列头选择;滚动条与视口尺寸自适应。
- 编辑能力:内置单元格编辑器,支持直接输入、追加、清空内容;区域清空与清除样式。
- 剪切板:复制、剪切、粘贴(右键菜单与剪切板高亮框),粘贴后自动刷新视图,剪切状态粘贴后会复位。
- 撤销重做:历史栈驱动的
undo/redo,工具栏状态随历史栈实时更新。 - 样式与格式:加粗、斜体、自动换行,水平/垂直对齐,字体色/背景色,统一外边框;支持批量样式更新的性能保护。
- 合并单元格:合并/取消合并选区,圈选时可包含已合并单元格。
- 行列管理:插入/删除行列,隐藏/取消隐藏行列,行高列宽拖拽调整。
- 右键菜单:依据点击区域动态过滤菜单项,并显示行号/列号占位文本;包含剪切板、行列、隐藏、清除、合并相关操作。
- 工具栏:保存、删除缓存、撤销、重做、样式与对齐、边框、合并相关快捷操作;图表入口预留但处于禁用态。
- 安装依赖:
npm install - 本地开发:
npm start(webpack dev server,默认 8080) - 生产构建:
npm run build
- 启动后访问开发服务器,组件会根据窗口全屏铺设。
- 数据加载与缓存:优先从
localStorage读取qt-spreadsheet-file;点击工具栏「保存」写入缓存,「删除缓存」清除本地存储。 - 编辑与样式:选中单元格后可直接输入;使用工具栏调整加粗、斜体、换行、对齐、颜色、边框;右键可清空内容或样式。
- 合并与区域操作:选区后使用工具栏或右键进行合并/取消合并;可框选跨越已合并单元格的区域。
- 行列操作:右键可向上/下/左/右插入行列、删除、隐藏/取消隐藏;行高列宽可通过表头拖拽调整。
- 剪切板:右键菜单支持复制/剪切/粘贴,剪切状态粘贴后会自动结束高亮。
- 工具栏的图表、格式刷、下划线、冻结等入口仅为占位或禁用状态,尚未接好业务逻辑;复制/剪切按钮同样未绑定行为,建议使用右键菜单完成。
- 本地存储容量有限,超大数据集请改用远端存储方案。
- 颜色选择暂为固定值,未提供调色板配置。
This project is open source and available under the MIT License.