コードの10行未満でJavaScriptのスプレッドシートのようなExcelを作成する

3101 ワード
webdev javascript react excel テキストリンク
スプレッドシートは、データを格納して、計算する最も重要な形式のうちの1つで、オンライン文書に集中する製品の重要な構成要素です.
このブログでは、わずか10分で豊富な機能JavaScriptのスプレッドシートを作成する方法を参照してください.
閉じるこの動画はお気に入りから削除されています

セットアップ

create-react-appで空のプロジェクトを作成することから始めましょう
あなたが既に反応プロジェクトを持っているならば、あなたはこのステップをスキップすることができます.
npx create-react-app my-spreadsheet
またはyarnを使用している場合
yarn create react-app my-spreadsheet
その後、my-spreadsheetフォルダには、スプレッドシートライブラリをインストール
# using npm
npm install @fortune-sheet/react
# or using yarn
yarn add @fortune-sheet/react

ライブラリの使用

src/App.jsを次のコンテンツに置き換えます
import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"


function App() {
  return <Workbook data={[{ name: "Sheet1" }]} />
}

export default App;
以下の行をsrc/index.cssに加えます
html, body, #root {
  height: 100%;
}
グレート、すべてのものが設定されます!
さて、実行してプロジェクトを起動します
# using npm
npm start
# or using yarn
yarn start
そこに行く!
あなたの周りを再生することができますし、機能を試してください.

次


次のブログでは、シートデータを永続化し、Collabrativeを作成する方法を示します.

スプレッドシートライブラリは完全にオープンソースです
https://github.com/ruilisi/fortune-sheet
それは積極的な開発の下、フィードバックフィードバックされます!
Activityで取得したviewの高さと幅が0の理由と解決策
コレクション内の直接removeオブジェクトとremove角標の違い