新开源宝藏:纯前端Excel编辑器,还能AI自动操作表格

新开源宝藏:纯前端Excel编辑器,还能AI自动操作表格

上个月接到一个需求,要在Web端做一个类似Excel的数据编辑功能。当时第一反应是找现成的轮子,毕竟这种复杂组件自己写太费劲了。

试了几个开源方案,不是功能太简陋就是集成太复杂。有的需要后端支持,有的导入导出还得依赖额外的库。最头疼的是,老板还提了一嘴:“能不能让AI帮用户自动填表格?”

意外发现

就在我准备妥协用传统方案的时候,偶然在GitHub上刷到了SheetNext这个项目。看了下README,好家伙,几乎完美契合需求:

  • 纯前端实现,不需要后端
  • 原生支持Excel文件导入导出
  • 内置AI工作流(这个真没想到)
  • 代码量很少,几行就能跑起来

说实话一开始我是半信半疑的,毕竟这种"大而全"的库往往坑很多。但想着反正开源免费,试试又不亏。

上手体验

安装超简单

npminstall sheetnext 

然后就是常规的引入:

import SheetNext from'sheetnext';import'sheetnext.css';constSN=newSheetNext(document.querySelector('#container'));

对,就这么几行。容器记得设置宽高就行,其他什么都不用管。

在这里插入图片描述


启动之后直接就是一个完整的Excel界面,该有的功能都有。单元格编辑、样式设置、公式计算、图表生成…体验下来基本跟Excel一模一样。

可以启用侧边栏AI助手

我这里生成了一个日历,效果如下,只能说AI迟早代替人类做表(这个需要中转,具体可以查看官方文档很简单)

在这里插入图片描述

导入导出是真的方便

之前用其他方案,导入导出Excel总要折腾半天。要么得装额外的依赖,要么得自己处理格式转换。

SheetNext直接原生支持

在这里插入图片描述

最惊喜的功能:AI操作

这个功能是我完全没想到的。现在AI这么火,各种产品都在往里塞AI,但大多数都是噱头,实际用起来很鸡肋。

SheetNext的AI功能真的不一样。

配置也很简单,就是在初始化的时候传个AI中转地址:

constSN=newSheetNext(document.querySelector('#container'),{AI_URL:"http://localhost:3000/sheetnextAI",AI_TOKEN:"your-token"});

然后你就能用自然语言操作表格了。举几个我实际用过的例子:

  • “在第3行插入5行空白行”
  • “把A列的数据按升序排列”
  • “根据销售数据生成一个柱状图”
  • “在B5单元格写个公式,计算C列的平均值”
**[截图占位:AI聊天面板,展示输入指令和执行结果]**

它不是简单的关键词匹配,是真的能理解你的意图。比如你说"把标题行加粗并且背景色改成灰色",它能准确识别哪一行是标题,然后自动设置样式。

这个功能对于不熟悉Excel操作的用户来说,简直是救星。以前得培训用户怎么用,现在直接让他们跟AI说需求就行了。

开发者友好的API

除了基础功能,SheetNext还提供了很完善的API。如果你想深度定制,完全没问题。

比如我项目里有个需求,要根据模板批量生成表格。用它的insertTable方法非常简单:

const template =[[{ v:"会议纪要", s:16, mr:3, fg:"#eee", h:45, b:true},{ w:160},"",{ w:160}],["时间","","地点",""],["主持人","","记录人",""],// ... 更多行];SN.activeSheet.insertTable(template,"A1",{ border:true, a:"c", h:35, w:140});
在这里插入图片描述

一次性就能生成格式化的模板,包括合并单元格、字体样式、行高列宽全都搞定。这要是手动操作,不知道要写多少代码。

一些细节

用了一段时间,发现SheetNext在很多细节上做得很好:

  1. 多实例支持:一个页面可以同时跑多个编辑器,互不干扰
  2. 撤销重做:自动记录操作历史,Ctrl+Z随便用
  3. 公式引擎:基本的Excel公式都支持,SUM、AVERAGE、IF这些常用的都能用
  4. 图表集成:基于ECharts,能做出很漂亮的图表
  5. 快捷键支持:Excel用户能无缝切换,学习成本几乎为零

最关键的是,性能真的不错。我测试过加载1000行数据,操作起来依然很流畅。之前用的某个方案,数据一多就开始卡顿。

适合什么场景

根据我的使用经验,SheetNext特别适合这几个场景:

  1. 后台管理系统:需要数据编辑和导入导出功能的
  2. 数据分析工具:需要可视化展示和交互式编辑的
  3. 在线协作表格:想做类似腾讯文档、石墨文档那种的
  4. 报表系统:需要灵活编辑报表格式的
  5. 教育培训:教Excel操作,有了AI功能会方便很多

如果你的项目需要Excel相关功能,我觉得真的可以试试这个。它不是万能的,但对于大部分常规需求来说,已经足够好用了。

开源的优势

SheetNext是开源的,这点我很看重。遇到问题可以直接看源码,也可以提Issue或者PR。

GitHub:https://github.com/wyyazlz/sheetnext

感兴趣的可以先去在线体验一下,跑跑Demo看看效果。

总结

作为一个用过好几个Excel组件的开发者,SheetNext给我的感觉是:简单、够用、有惊喜

简单是指上手成本低,不需要学很多概念就能用起来。够用是指常见的Excel功能它都有,能覆盖大部分场景。惊喜当然就是AI功能了,这个确实是我没想到的。

如果你也在找类似的解决方案,不妨试试看。反正是开源免费的,试错成本很低。


本文基于个人使用经验编写,如有疑问欢迎评论区交流吗,这个项目最近几天才发布的Star很低,大家有需要的可以支持一下。
GitHub Star 支持一下: https://github.com/wyyazlz/sheetnext

Read more

WebGoat 环境搭建及实战完全指南

WebGoat 环境搭建及实战完全指南 WebGoat 是由 OWASP 维护的、故意设计不安全的 Web 应用程序,专门用于教学 Web 应用安全漏洞和防御技术。 📚 WebGoat 概述 官方地址:https://github.com/WebGoat/WebGoat 特点: * 完全免费开源 * 包含 100+ 个安全漏洞练习 * 每个课程都有详细指导 * 支持多语言(包括中文) * 实时反馈和得分系统 * 适合从初学者到专家的所有级别 🚀 环境搭建方法 方法1:使用 Docker(推荐) # 1. 安装 Docker(如未安装)# Linuxsudoapt-get update sudoapt-getinstall docker.io docker-compose# 2. 拉取 WebGoat 镜像docker pull

Chrome 插件开发指南:从 Web 到扩展,以及「网页内容总结助手」实战

Chrome 插件开发指南:从 Web 到扩展,以及「网页内容总结助手」实战

本文结合开源项目 网页内容总结助手(React + Vite + Manifest V3)总结插件开发中的注意点,并对比插件开发与普通 Web 开发的差异,方便从前端转型或入门扩展开发的同学少踩坑。 一、先安利一下:网页内容总结助手 网页内容总结助手 是一款基于 React + Vite 构建的 Chrome 扩展,主打「一键总结网页并导出 Markdown」: * 一键提取正文并调用 ModelScope + DeepSeek 做 AI 总结,或使用本地 mock * 选择页面任意区域进行总结(高亮选择模式) * 多种输出类型:总结、博客、文章、报告、要点列表 * 设置本地持久化:API Key、总结字数等存于 chrome.storage.sync,无需后端 * 遵循 Manifest

前端编程三剑客HTML、CSS、JavaScript 三者的关系详解

前端编程三剑客HTML、CSS、JavaScript 三者的关系详解

作为程序员,如果你是想单纯学习HTML,JavaScript或者CSS,其实它们是一家的三兄弟。你了解 HTML、CSS、JavaScript三者的关系吗,我们可以用“网页的三层架构”来通俗理解,三者分工明确、协同工作,共同构建出完整且交互丰富的网页。         精美的网页如果比作是一栋功能完备的房屋,那么 HTML 就是这栋房子坚实的砖混框架与墙体结构,它划定了房间的格局、门窗的位置,是房屋能立起来的基础骨架;CSS 是房屋的装修装饰 —— 从墙面的乳胶漆、地板的材质,到家具的风格、软装的搭配,让房屋拥有美观的样貌和舒适的视觉体验;而 JavaScript,就是让这栋房屋真正 “活” 起来的水电系统、智能设备与安防设施,是控制灯光的开关、调节温度的空调、感应开合的门窗,让房屋不再是冰冷的建筑,而是能响应需求、具备交互功能的宜居空间。         下面从核心定位、分工对比、协同关系三个维度详细讲解。         文章最后,举例说明了三者结合实现一个表格的功能,你能分清程序中哪个部分是CSS吗? 一、三者定位 把网页比作一座“房