最近在研究在線電子表格的技術(shù)實(shí)現(xiàn)，發(fā)現(xiàn)了幾個(gè)優(yōu)質(zhì)的開(kāi)源電子表格項(xiàng)目，這里和大家一起分享一下。

同時(shí)我也把其中一款電子表格集成到了Next-Admin （基于nextjs的開(kāi)源中后臺(tái)系統(tǒng)）中，方便大家學(xué)習(xí)參考。

github地址：https://github.com/MrXujiang/next-admin

1. fortune-sheet

FortuneSheet的目標(biāo)是制造一個(gè)功能豐富，配置簡(jiǎn)單的在線表格組件，開(kāi)箱即用。項(xiàng)目源于 Luckysheet，并繼承了它的很多代碼。作者為將其轉(zhuǎn)換為typescript做了很多努力，并且解決了一些原項(xiàng)目設(shè)計(jì)層面的問(wèn)題。

但是我個(gè)人在研究和使用它的時(shí)候還是發(fā)現(xiàn)了很多問(wèn)題，比如在next項(xiàng)目中無(wú)法更新和初始化數(shù)據(jù)，同時(shí)對(duì)圖片的支持也不是特別友好，希望作者看到之后能正視這些問(wèn)題。

基礎(chǔ)使用方式如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"
 
ReactDOM.render(
  <Workbook data={[{ name: "Sheet1" }]} />,
  document.getElementById('root')
);

github地址：https://github.com/ruilisi/fortune-sheet

2. x-spreadsheet

x-spreadsheet是一個(gè)基于 Web(es6) canvas 構(gòu)建的輕量級(jí) Excel 開(kāi)發(fā)庫(kù), 我們可以使用原生js的方式在項(xiàng)目中引用它，也就意味著它可以在不同的前端框架中使用，比如vue，react，angular等。

基礎(chǔ)使用方式如下：

import Spreadsheet from "x-data-spreadsheet";
const s = new Spreadsheet("#x-spreadsheet-demo")
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });
 
// data validation
s.validate()

github地址：https://github.com/myliang/x-spreadsheet

3. univer

Univer 對(duì) Luckysheet 底層進(jìn)行了大量重構(gòu)，支持非常多的功能，包括但不限于公式計(jì)算、條件格式、數(shù)據(jù)驗(yàn)證、篩選、協(xié)同編輯、打印、導(dǎo)入導(dǎo)出等等。

它有商業(yè)版本和開(kāi)源版本，我也使用了一下它的開(kāi)源版本，但是在Nextjs最新版本中仍然會(huì)報(bào)錯(cuò)，同時(shí)文檔上希望能有更詳細(xì)的API說(shuō)明，如果作者看到了希望能重視這個(gè)問(wèn)題哈，還是比較看好這個(gè)項(xiàng)目。

接下來(lái)附上一個(gè)在vite中使用的代碼案例：

import "./style.css";
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";
 
import { Univer, UniverInstanceType } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";
 
const univer = new Univer({
  theme: defaultTheme,
});
 
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
 
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  header: true,
  footer: true,
});
 
univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);
 
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
 
// create univer sheet instance
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

github地址：https://github.com/dream-num/univer

4. handsontable

handsontable 是一款完全開(kāi)源的在線電子表格組件，他提供了詳細(xì)的文檔和豐富的API接口來(lái)保證我們能實(shí)現(xiàn)專(zhuān)業(yè)級(jí)電子表格：

它同時(shí)支持多種前端框架，比如vue2， vue3， react等，非常適合有技術(shù)余力的團(tuán)隊(duì)經(jīng)行二次開(kāi)發(fā)。

一個(gè)簡(jiǎn)單的使用案例：

import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.min.css';
registerAllModules();
 
// generate an array of arrays with dummy data
const data = new Array(100) // number of rows
  .fill()
  .map((_, row) => new Array(50) // number of columns
    .fill()
    .map((_, column) => `${row}, ${column}`)
  );
 
const ExampleComponent = () => {
  return (
    <HotTable
      data={data}
      rowHeaders={true}
      colHeaders={true}
      contextMenu={true}
      mergeCells={[
        { row: 1, col: 1, rowspan: 3, colspan: 3 },
        { row: 3, col: 4, rowspan: 2, colspan: 2 }
      ]}
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation"
    />
  );
};
 
export default ExampleComponent;

后面我也考慮基于它來(lái)實(shí)現(xiàn)一款類(lèi)似Excel的在線電子表格，實(shí)現(xiàn)更強(qiáng)大的功能，并集成到我最近上線的Nocode/WEP項(xiàng)目中。

github地址：https://github.com/handsontable/handsontable

最后

我目前已經(jīng)把其中一款電子表格集成到了Next-Admin （基于nextjs的開(kāi)源中后臺(tái)系統(tǒng)）中，方便大家學(xué)習(xí)參考。

后續(xù)會(huì)在 Next-Admin 中集成更多最佳實(shí)踐，也歡迎感興趣的朋友交流討論。

如果你對(duì) next 開(kāi)發(fā)或者需要開(kāi)發(fā)一套管理系統(tǒng)， 我相信 Next-Admin 會(huì)給你開(kāi)發(fā)和學(xué)習(xí)的靈感。

同時(shí)也歡迎和我一起貢獻(xiàn)， 讓它變得更優(yōu)秀~

github地址：https://github.com/MrXujiang/next-admin

演示地址：http://next-admin.com

由于服務(wù)器在國(guó)外， 所以建議大家git到本地體驗(yàn)~