前幾天和大家分享了我精心研發(fā)的開(kāi)源可視化打印平臺(tái) flowmix/print，最近有粉絲說(shuō)想實(shí)現(xiàn)一個(gè)在線(xiàn)電子表格的案例，由于之前寫(xiě)過(guò)類(lèi)似的應(yīng)用，所以今天和大家分享一下使用js實(shí)現(xiàn)一個(gè)在線(xiàn)電子表格的案例，方便大家學(xué)習(xí)參考。

Demo演示

圖片

我也寫(xiě)了配套的電子表格管理頁(yè)面，具體UI如下：

圖片

當(dāng)然電子表格管理頁(yè)面主要是純前端實(shí)現(xiàn)，主要包括個(gè)人表格管理和表格模版模塊，大家可以對(duì)接真實(shí)的數(shù)據(jù)。

圖片

如果大家想學(xué)習(xí)代碼，可以在【趣談前端】公眾號(hào)回復(fù)“表格源碼”。

技術(shù)實(shí)現(xiàn)

圖片

目前我實(shí)現(xiàn)的"在線(xiàn)電子表格"是一個(gè)基于Web的電子表格應(yīng)用，提供類(lèi)似Excel的功能，支持?jǐn)?shù)據(jù)編輯、公式計(jì)算、表格樣式設(shè)置、多工作表管理等功能。該項(xiàng)目采用現(xiàn)代主流前端技術(shù)棧構(gòu)建，具有響應(yīng)式設(shè)計(jì)和良好的用戶(hù)體驗(yàn)。

技術(shù)棧如下：

1. 核心框架與庫(kù)

• Next.js: 基于React的全?？蚣?，提供服務(wù)端渲染、路由管理和API功能
• React: 用于構(gòu)建用戶(hù)界面的JavaScript庫(kù)
• TypeScript: 為JavaScript添加靜態(tài)類(lèi)型檢查，提高代碼質(zhì)量和開(kāi)發(fā)效率
• Luckysheet: 開(kāi)源的JavaScript電子表格庫(kù)，提供核心的電子表格功能
• Tailwind CSS: 實(shí)用優(yōu)先的CSS框架，用于快速構(gòu)建自定義界面
• Lucide React: 提供現(xiàn)代化圖標(biāo)集的React組件庫(kù)

2. UI組件

- shadcn/ui: 基于Radix UI的高質(zhì)量React組件集合

- Radix UI: 無(wú)樣式、可訪(fǎng)問(wèn)性?xún)?yōu)先的UI組件庫(kù)

3. 工具與輔助庫(kù)

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

核心功能實(shí)現(xiàn)

1. 電子表格引擎集成

項(xiàng)目核心是對(duì)Luckysheet的集成與擴(kuò)展。LuckysheetEditor 組件封裝了Luckysheet的功能，并添加了額外的數(shù)據(jù)管理、事件處理和UI交互層。代碼實(shí)現(xiàn)類(lèi)似如下：

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

更詳細(xì)的封裝大家可以參考我的源代碼實(shí)現(xiàn)。

2. 數(shù)據(jù)變更監(jiān)聽(tīng)與保存

目前我的方案是實(shí)現(xiàn)了多層次的數(shù)據(jù)變更監(jiān)聽(tīng)機(jī)制，確保用戶(hù)的編輯操作能被準(zhǔn)確捕獲并標(biāo)記為未保存狀態(tài)：

• 方法重寫(xiě): 重寫(xiě)Luckysheet的setCellValue方法，在原始功能基礎(chǔ)上添加變更監(jiān)聽(tīng)，代碼類(lèi)似如下：

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

• 事件監(jiān)聽(tīng): 監(jiān)聽(tīng)Luckysheet的各種事件，如工作表添加、刪除、單元格更新等， 類(lèi)似代碼如下：

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

• DOM變更觀(guān)察: 使用 MutationObserver 監(jiān)聽(tīng)DOM變化，捕獲可能的數(shù)據(jù)變更，實(shí)現(xiàn)的代碼類(lèi)似如下：

const observer = new MutationObserver((mutations) => {
  // 防抖處理
  if (dataChangeTimerRef.current) {
    clearTimeout(dataChangeTimerRef.current);
  }
  dataChangeTimerRef.current = setTimeout(() => {
    // 檢查是否是真正的數(shù)據(jù)變化
    // ...
  }, 1000);
});

自動(dòng)保存機(jī)制：我之前也實(shí)現(xiàn)了一個(gè)，大家也可以應(yīng)用到在線(xiàn)表格項(xiàng)目中，代碼類(lèi)似如下：

useEffect(() => {
  if (autoSaveInterval > 0 && luckysheetInitialized.current) {
    autoSaveTimerRef.current = setInterval(() => {
      if (hasUnsavedChanges) {
        handleSave(true).then(success => {
          // 處理保存結(jié)果
        });
      }
    }, autoSaveInterval);
  }


  return () => {
    if (autoSaveTimerRef.current) {
      clearInterval(autoSaveTimerRef.current);
    }
  };
}, [autoSaveInterval, handleSave, hasUnsavedChanges]);