用Nextjs写一个在线电子表格编辑器，已开源！-CSDN博客

本文链接：https://blog.csdn.net/KlausLily/article/details/147082187

hi, 大家好, 我是徐小夕.

前几天和大家分享了我精心研发的开源可视化打印平台 flowmix/print，最近有粉丝说想实现一个在线电子表格的案例，由于之前写过类似的应用，所以今天和大家分享一下使用js实现一个在线电子表格的案例，方便大家学习参考。

Demo演示

我也写了配套的电子表格管理页面，具体UI如下：

当然电子表格管理页面主要是纯前端实现，主要包括个人表格管理和表格模版模块，大家可以对接真实的数据。

如果大家想学习代码，可以在【趣谈前端】公众号回复“表格源码”。

技术实现

目前我实现的"在线电子表格"是一个基于Web的电子表格应用，提供类似Excel的功能，支持数据编辑、公式计算、表格样式设置、多工作表管理等功能。该项目采用现代主流前端技术栈构建，具有响应式设计和良好的用户体验。

技术栈如下：

1. 核心框架与库

Next.js: 基于React的全栈框架，提供服务端渲染、路由管理和API功能
React: 用于构建用户界面的JavaScript库
TypeScript: 为JavaScript添加静态类型检查，提高代码质量和开发效率
Luckysheet: 开源的JavaScript电子表格库，提供核心的电子表格功能
Tailwind CSS: 实用优先的CSS框架，用于快速构建自定义界面
Lucide React: 提供现代化图标集的React组件库

2. UI组件

- shadcn/ui: 基于Radix UI的高质量React组件集合

- Radix UI: 无样式、可访问性优先的UI组件库

3. 工具与辅助库

next-themes: 提供深色模式支持
React Router DOM: 用于客户端路由管理（在React版本中使用）

核心功能实现

1. 电子表格引擎集成

项目核心是对Luckysheet的集成与扩展。LuckysheetEditor 组件封装了Luckysheet的功能，并添加了额外的数据管理、事件处理和UI交互层。代码实现类似如下：

// 初始化Luckysheetwindow.luckysheet.create({  container: "luckysheet",  title: currentTitle,  data: initialData,  index: activeSheetIndex,  lang: "zh",  // 其他配置...});

更详细的封装大家可以参考我的源代码实现。

2. 数据变更监听与保存

目前我的方案是实现了多层次的数据变更监听机制，确保用户的编辑操作能被准确捕获并标记为未保存状态：

1. 方法重写: 重写Luckysheet的setCellValue方法，在原始功能基础上添加变更监听，代码类似如下：

window.luckysheet.setCellValue = function(...args) {  const result = originalSetCellValue.apply(this, args);  setHasUnsavedChanges(true);  return result;};

2. 事件监听: 监听Luckysheet的各种事件，如工作表添加、删除、单元格更新等，类似代码如下：

document.addEventListener("luckysheet.deleteSheet", () => {  setHasUnsavedChanges(true);});

3. DOM变更观察: 使用 MutationObserver 监听DOM变化，捕获可能的数据变更，实现的代码类似如下：

const observer = new MutationObserver((mutations) => {  // 防抖处理  if (dataChangeTimerRef.current) {    clearTimeout(dataChangeTimerRef.current);  }  dataChangeTimerRef.current = setTimeout(() => {    // 检查是否是真正的数据变化    // ...  }, 1000);});

4. 自动保存机制：我之前也实现了一个，大家也可以应用到在线表格项目中，代码类似如下：

useEffect(() => {  if (autoSaveInterval > 0 && luckysheetInitialized.current) {    autoSaveTimerRef.current = setInterval(() => {      if (hasUnsavedChanges) {        handleSave(true).then(success => {          // 处理保存结果        });      }    }, autoSaveInterval);  }
  return () => {    if (autoSaveTimerRef.current) {      clearInterval(autoSaveTimerRef.current);    }  };}, [autoSaveInterval, handleSave, hasUnsavedChanges]);

后续会持续分享更多有价值的技术实践和AI技巧，大家感兴趣的可以关注【趣谈前端】，获取更多干货：

最后

我们最近研发的 flowmix/docx多模态文档引擎，目前也在持续更新中，欢迎体验参考：