新开源 Excel 编辑器，纯前端+AI，一句话就能批量处理数据

用户377625391430
202 阅读4分钟

前几天在 GitHub 上闲逛，无意中看到一个项目：SheetNext。点进去一看，居然是个纯前端的 Excel 编辑器，而且还内置了 AI 功能。

试了一下，感觉还挺实用的，分享给大家。

image.png 可开启AI助手面板，试了一下生成日历，效果调炸天AI逆天了（这一步要自己配置中转，数据超级安全）：

image.png

这个项目有什么特别的

1. 完全前端实现，不需要后端

这个是最吸引我的地方。现在很多在线表格工具，Excel 文件都得传到服务器处理。但这个项目不一样，所有操作都在浏览器里完成：

  • Excel 文件解析：前端完成
  • 数据编辑：前端完成
  • 文件导出：前端完成

文件不用上传服务器，这对处理敏感数据的场景特别合适。

而且接入也简单，几行代码就能用：

<!-- 引入样式 -->
<link rel="stylesheet" href="dist/sheetnext.css">

<!-- 编辑器容器 -->
<div id="SNContainer" style="width: 100vw; height: 100vh;"></div>

<!-- 引入脚本 -->
<script src="dist/sheetnext.umd.js"></script>

<!-- 初始化 -->
<script>
  const SN = new SheetNext(document.querySelector('#SNContainer'));
</script>

就这么几行，编辑器就跑起来了。

2. 内置 AI，可以用自然语言操作表格

这个功能挺有意思的。传统的表格操作要么手动点，要么写代码。但这个项目把 AI 集成进来了，直接说话就行：

  • "把销售额大于 10000 的行标成红色"
  • "在最后一列计算每行的总和"
  • "根据 A 到 C 列的数据生成一个柱状图"
  • "删除所有空白行"

image.png

AI 会自动帮你完成操作，不用学 API。这个对不会编程的人特别友好，产品、运营这些岗位也能直接上手。

配置也简单：

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

3. 一键导入导出 Excel

这个也是纯前端实现的，不需要后端转换格式。

导入：

fileInput.addEventListener('change', (e) => {
  SN.import(e.target.files[0]);
});

导出：

SN.export('XLSX');

而且导入导出都保留了原有的样式、公式、图表，不会丢数据。

功能覆盖得还挺全

试了一圈，该有的功能基本都有：

  • 单元格编辑：富文本、合并单元格、数据验证
  • 样式设置：字体、颜色、边框、对齐方式
  • 公式计算：内置公式引擎，SUM、AVERAGE、IF 这些常用公式都支持
  • 图表：柱状图、折线图、饼图
  • 排序筛选：多列排序、自定义筛选
  • 撤销重做：操作历史可以回退

看了几个实际用法

快速生成模板

项目提供了 insertTable 方法，可以快速插入表格模板。比如这个会议纪要模板：

const template = [
  [
    { v: "会议纪要", s: 16, mr: 3, fg: "#eee", h: 45, b: true },
    { w: 160 }, "", { w: 160 }
  ],
  ["时间", "", "地点", ""],
  ["主持人", "", "记录人", ""],
  ["参会人员", { mr: 2 }, "", ""],
  [{ v: "会议内容", h: 280 }, { mr: 2 }, "", ""],
  [{ v: "备注", h: 80 }, { mr: 2 }, "", ""]
];

SN.activeSheet.insertTable(template, "A1", {
  border: true,
  a: "c",  // 居中对齐
  h: 35,   // 默认行高
  w: 140   // 默认列宽
});

image.png

批量处理数据

可以遍历单元格批量处理数据。比如删除空白行：

const sheet = SN.activeSheet;

// 从后往前遍历，避免索引混乱
sheet.eachArea("A:A", (r, c) => {
  if (sheet.getCell(r, c).showVal === "") {
    sheet.delRows(r, 1);
  }
}, true); // true 表示反向遍历

动态图表

图表可以引用单元格数据，改表格内容图表会自动更新：

SN.activeSheet.addDrawing({
  type: 'chart',
  startCell: 'E2',
  option: {
    title: { text: '销售趋势' },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月']
    },
    yAxis: { type: 'value' },
    series: [{
      name: '销售额',
      type: 'line',
      data: [820, 932, 901, 934]
    }]
  }
});

image.png

适合什么场景

看完之后，我觉得这个项目适合这几类场景：

  1. 不想依赖后端：前端项目需要表格功能，但不想搭后端服务
  2. 数据敏感：财务、HR 这些场景，数据不能上传服务器
  3. 快速原型：需要快速搭个带表格的 Demo
  4. 降低使用门槛：用 AI 让不会编程的人也能操作表格
  5. 内网环境：断网或内网环境，不能依赖在线服务

项目信息

这个项目是开源的，可以直接去看代码：

文档写得还算详细，照着 README 和 API 文档能很快上手。

一些不足

用了一段时间，也发现了一些问题：

  • 有些高级功能还没有（比如数据透视表）
  • 复杂公式支持得还不够全

最后

如果你的项目需要一个纯前端的 Excel 编辑器，可以试试这个。开源免费，代码也能自己改。

AI 操作表格这个功能确实挺新颖的，降低了使用门槛。对于那些不想学 API、只想快速完成任务的用户来说，体验会好很多。

这个库刚出来不就，Star很低，大家可以去点点支持一下，说不定哪天用上了这个感觉开发也不容易

就这样，希望对你有帮助 👋

avatar
文章
阅读
粉丝