ExcelをWebアプリで取り扱う読み込み / 編集 / 出力 - React編 - - インフラジスティックス・ジャパン株式会社Blog

こんにちは！ソリューションコンサルタントの滝元です。

Webアプリを開発するにあたってユーザーの方からこんなことを言われたことはないでしょうか？

「とりあえずExcelみたいなの作ってほしい」

結構な無茶振りのようにも思えますが、Ignite UI for React のスプレッドシート機能を使えば提供できてしまいます！

本記事では React アプリに Ignite UI for React の導入し Excel ファイルを読み込み / 編集 / 出力する機能を実装するところまで解説します！

React のプロジェクトを作成する
Ignite UI for React Spreadsheet のインストール
- モジュールのインポート
Excel読み込みページの実装
Excel編集・出力ページの実装
まとめ

React のプロジェクトを作成する

こちらは過去記事を参照してください。

よくあるけど開発が大変な「多段明細」UIをReactで実装する - インフラジスティックス・ジャパン株式会社Blog

ルーティング機能を追加する

今回は複数ページに機能を実装するのでルーティング機能を追加します。

プロジェクトに react-router-dom v6 をインストールします。npm を使用して、以下のコマンドでインストールできます。

パッケージのインストール

npm install react-router-dom@6

ルーターの設定

BrowserRouter と Routes コンポーネントを使用し、App.tsx にルーティング機能を追加します。

App.tsx

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Load from './pages/load';
import Save from './pages/save';

function App() {
  return (
    <Router>
      <Link to="/">読み込み</Link>
      <br />
      <Link to="/save">編集・出力</Link>

      <Routes>
        <Route path="/" element={<Load />} />
        <Route path="/save" element={<Save />} />
      </Routes>
    </Router>
  );
}

export default App;

各ページの設定

src/pages フォルダに load.tsx , save.tsx フォルダを作成します。

それぞれのファイルは下記のようにタイトルだけ表示するようにしています。 load.tsx

export default function Load() {
    return <><h2>読み込み</h2></>;
}

save.tsx

export default function Save() {
    return <><h2>編集・出力</h2></>;
}

開発サーバーの起動

開発サーバーを起動します。

npm run dev

ルーティング機能が確認できました。

Ignite UI for React Spreadsheet のインストール

jp.infragistics.com

ドキュメントに従ってインストールします。

React Spreadsheet コンポーネント – Ignite UI for React

モジュールのインポート

npm install --save igniteui-react-core
npm install --save igniteui-react-excel
npm install --save igniteui-react-spreadsheet

Excel ファイルを扱うためのユーティリティが提供されていてるので保存しておきます。 ExcelUtility.ts React Excel ライブラリ | Excel ユーティリティ | インフラジスティックス

今回はsrc/ExcelUtility.tsに保存しました。

ExcelUtility.tsで必要なモジュールをインストールします。

npm i file-saver
npm i --save-dev @types/file-saver

Excel読み込みページの実装

load.tsx でサーバーにあるExcel を読み込んで表示する実装をしていきます。

pubilcフォルダにExcelファイルを用意します。今回は画像のようなExcel ファイルを用意しました。

TaskBook.xlsx 進捗率にはデータバーを設定しています。

App.tsxで必要なモジュールを設定します。

import { IgrExcelModule } from "igniteui-react-excel";
import { IgrSpreadsheetModule } from "igniteui-react-spreadsheet";

IgrExcelModule.register();
IgrSpreadsheetModule.register();

load.tsxはこのように実装しました。

IgrSpreadsheet コンポーネントを使用し、初期ロード時に先程用意したExcelファイルを表示するようにしています。

import React from "react";
import { IgrSpreadsheet } from "igniteui-react-spreadsheet";
import { ExcelUtility } from "../ExcelUtility";

export default function Load() {
  const spreadsheetRef = React.useRef<IgrSpreadsheet>(null);

  // 初期ロード時にテンプレートExcelファイルを読み込みます
  React.useEffect(() => {
    ExcelUtility.loadFromUrl("TaskBook.xlsx").then((w) => {
      spreadsheetRef.current!.workbook = w;
    });
  }, []);
  return (
    <>
      <h2>読み込み</h2>
      <div style={{ height: "700px" }}>
        <IgrSpreadsheet height="100%" ref={spreadsheetRef} />
      </div>
    </>
  );
}

ブラウザで用意した Excel ファイルが表示されることが確認できました！制限はありますが、ユーザーはブラウザで Excel と同じ操作ができるようになっています。

Excel編集・出力ページの実装

Ignite UI for React ではExcelブックの作成、シートの追加、セルの値の変更などコードで操作ができるような機能が提供されています。

次のページではボタンが押されたらExcelファイルが作られるページを作っていきます。

save.tsx はこのように実装しました。

import {
  CellFill,
  Workbook,
  WorkbookFormat,
  WorkbookSaveOptions,
} from "igniteui-react-excel";
import { saveAs } from "file-saver";

export default function Save() {
  const download = async () => {
    return new Promise<null>((resolve, reject) => {
      const workbook = new Workbook(WorkbookFormat.Excel2007);
      // new Workbook()の時点ではシートが存在しないのでシートを追加
      const sheet = workbook.worksheets().add("シート");
      // A1セルに値を設定
      sheet.rows(0).cells(0).value = "Hello World";

      // A1セルに背景色を設定
      const cellFill = CellFill.createSolidFill("Cyan");
      sheet.rows(0).cells(0).cellFormat.fill = cellFill;

      const opt = new WorkbookSaveOptions();
      opt.type = "blob";

      workbook.save(
        opt,
        (d) => {
          const fileExt = ".xlsx";
          const fileName = `test${fileExt}`;
          saveAs(d as Blob, fileName);
          resolve(null);
        },
        (e) => {
          reject(e);
        }
      );
    });
  };
  return (
    <>
      <h2>編集・出力</h2> <button onClick={download}>ダウンロード</button>
    </>
  );
}