FortuneSheet

FortuneSheetは、ExcelやGoogleスプレッドシートなどの豊富な機能を提供するドロップインJavaScriptスプレッドシートライブラリです。

英語|简体中文

目的

の目標は

FortuneSheet

このプロジェクトはLuckysheetから発信され、多くのコードを継承しています。プロジェクト全体をタイプスクリプト（まだ進行中）に翻訳し、プロジェクトレベルで問題を解決するために多くの努力が払われてきました。

FortuneSheetをパワフルでありながらメンテナンスしやすいものにすることを目指しています。

オンラインデモ

fortune-sheet-demoのオンラインデモをご覧ください

注意

このプロジェクトは初期の開発段階にあり、APIは将来大幅に変更される可能性があり、本番環境では注意して使用してください。

Luckysheetの改善

• タイプスクリプトで完全に書かれています。

• import

  これで、 /

  require

  を使用してライブラリを使用 できます。

  import { Workbook } from '@fortune-sheet/react'

• 同じページ上の複数のインスタンスがサポートされています。
• 依存関係を削除

  jQuery

  し、ネイティブ

  React

  /

  Vue

  +を使用

  immer

  してdomとstateを管理します。
• 数式計算を処理するために、フォークされたhandsontable/formula-parserに変更されました。
• dom構造を最適化しました。
• アイコンは他のメンテナにとって更新するのに不便であるため、から

  iconfont

  のアイコンをSVGに置き換えました。

  iconfont

• コンテナの外部に表示される要素は作成されません。

• window

  オブジェクトにデータを保存しないでください。

特徴

• データ構造はLuckysheetと互換性があります。
• 書式設定：スタイル、テキストの配置と回転、テキストの切り捨て、オーバーフロー、自動行の折り返し、複数のデータ型、セルのセグメンテーションスタイル
• セル：複数選択、セルの結合
• 行と列：行または列を挿入、削除します
• 操作：コピー、貼り付け、切り取り、ホットキー
• 数式と関数：組み込みの数式

ロードマップ

• ✅バックエンドストレージとの共同編集をサポートします。
• ✅元に戻す/やり直しをサポートします。
• モバイル適応。
• APIを公開します。
• テストを追加します。
• より基本的な機能：
  • フィルハンドル
  • フォント
  • ✅フォーマットペインター
  • ✅コメント
  • ✅画像を挿入
  • その他のツールバーボタン
• Excelのインポートとエクスポート。
• Vueをサポートします。
• その他の機能：
  • フィルタ、並べ替え
  • 条件付き書式
  • ドラッグアンドドロップ
  • 見つけて交換する
  • 位置
  • データ検証
  • ✅氷結
  • テキストを非表示にして分割する
• より高度な機能：
  • ピボットテーブル
  • チャート
  • スクリーンショット

ドキュメンテーション

fortune-sheet-docで詳細なドキュメントを参照してください

始める（反応する）

ライブラリをダウンロードしてインストールします

yarn add @fortune-sheet/react

またはnpmを使用する：

npm install @fortune-sheet/react

HTMLプレースホルダーを作成する

<style>
  html, body, #root {
    width: 100%;
    height: 100%;
  }
</style>
<div id="root"></div>

注： 100％である必要は

width

height

auto

シートをレンダリングする

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

バックエンドのストレージとコラボレーション

ユーザーがシートを操作するたびに、の配列がコールバック

Op

onOp

[
    {
        "op": "replace",
        "index": "0",
        "path": ["data", 1, 0, "bl"],
        "value": 1
    }
]

この操作は、オンラインコラボレーションでのデータベースの変更と状態の同期に役立ちます。

Express

MongoDB

backend-demo

で実行し、コラボレーションの例

node index.js

に関する詳細なドキュメントについては、 fortune-sheet-doc

Op

貢献

予想されるワークフローは次のとおりです。フォーク->パッチ->プッシュ->プルリクエスト

プルリクエストを行う前に、必ず寄稿ガイドをお読みください。

発達

インストール

yarn

発達

yarn dev

包装

yarn build

ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。ライセンスの全文については、MITを参照してください。