开源地址https://github.com/littlecate/PumpkinDesigner# PumpkinDesigner纯js轻量级表格数据编辑器作为 PumpkinDev[www.pumpkindev.com](www.pumpkindev.com)核心前端编辑组件专注于**数据录入界面开发**与**打印模板设计**场景兼顾易用性与定制化能力。 ⚠️ 注意本组件聚焦轻量定制化场景若需完全复刻 Excel 全功能该项目可能无法满足你的需求。## 开发背景很多客户的核心工作载体是表格对「类 Excel 表格录入界面」有强需求但市面上同类组件存在两大痛点- 商用组件成本高且功能固化难以定制- 原生 Excel 风格的组件过度贴合 Excel 逻辑无法灵活扩展业务特性如单元格修约、自定义下拉规则等。因此我们打造了 PumpkinDesigner —— 既保留 Excel 友好的操作习惯又支持高度定制化开发兼顾界面易用性与功能可控性。## ✨ 核心功能特点### 1. 类 Excel 操作体验且更灵活- **基础操作全覆盖**字体样式、单元格格式、插入图片支持单元格内嵌图、浮动图、表格背景图其中内嵌图支持上下左右位置摆放是Excel没有的- **快捷键适配**完美支持上下左右方向键、Enter、Tab 键贴合日常操作习惯- **智能辅助功能**自动填充、公式计算选中公式单元格时会显示公式及与公式对应的单元格名称交互体验优于 Excel### 2. 数据录入专属能力- 字段与单元格双向绑定数据联动更高效- 内置下拉选择、自动下拉补全、日历控件、复选框等录入组件- 支持自定义录入规则如单元格修约、个性化下拉逻辑。### 3. 打印模板设计- 自动填充字段、表体自动计算适配复杂模板场景- 可结合报告生成组件快速生成各类结构化/非结构化报告。## 功能截图 以下为核心功能展示| 功能场景 | 截图展示 ||----------|----------|| 表格编辑器 |  || 录入界面 |  |## 项目目录说明| 目录/文件 | 说明 ||-----------|------|| Code/ | 核心代码主目录 || Code/src/ | 源码目录开发核心 || Code/dist/ | 打包后产物目录 || Code/testEditor_design.html | 源码功能测试页面 || Code/testEditor_min.html | 打包后功能验证页面 || Code/testFillData.html | 数据填充功能测试页面 || docs/ | 项目文档、截图等资源目录 || Pack/ | JS 打包脚本项目目录 |## 快速上手### 1. 打包构建执行 Python 打包脚本生成生产环境可用的 JS 文件bashpython.exe ./Pack/pack_js_cli.py ./Code### 2. 开发与测试无需复杂环境配置直接通过浏览器打开测试文件即可验证功能1. 打开 Code/testEditor_design.html测试源码功能完整性2. 打开 Code/testEditor_min.html验证打包后代码是否正常运行3. 打开 Code/testFillData.html测试数据填充、字段绑定等核心业务能力。## 开源许可本项目采用 **MIT 开源协议**你可自由用于商业/非商业场景修改、分发代码无需开源衍生作品仅需保留版权声明即可。## 关于 PumpkinDevPumpkinDesigner 是 PumpkinDev 生态的核心组件更多报表解决方案可访问[www.pumpkindev.com](www.pumpkindev.com)。