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

Demo演示

圖片

我也寫了配套的電子表格管理頁面，具體UI如下：

圖片

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

圖片

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

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

圖片

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

技術(shù)棧如下：

1. 核心框架與庫

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

2. UI組件

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

- Radix UI: 無樣式、可訪問性優(yōu)先的UI組件庫

3. 工具與輔助庫

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

核心功能實現(xiàn)

1. 電子表格引擎集成

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

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

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

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

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

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

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

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

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

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

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

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

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]);