ExcelをWebアプリで取り扱う 読み込み / 編集 / 出力 - React編 -
こんにちは！ソリューションコンサルタントの滝元です。
Webアプリを開発するにあたってユーザーの方からこんなことを言われたことはないでしょうか？
「とりあえずExcelみたいなの作ってほしい」
結構な無茶振りのようにも思えますが、Ignite UI for React の スプレッドシート機能を使えば提供できてしまいます！
本記事では React アプリに Ignite UI for React の導入し 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 のインストール
ドキュメントに従ってインストールします。
React Spreadsheet コンポーネント – Ignite UI for React
モジュールのインポート
npm install --save igniteui-react-core
npm install --save igniteui-react-excel
npm install --save igniteui-react-spreadsheetExcel ファイルを扱うためのユーティリティが提供されていてるので保存しておきます。 ExcelUtility.ts React Excel ライブラリ | Excel ユーティリティ | インフラジスティックス
今回はsrc/ExcelUtility.tsに保存しました。
ExcelUtility.tsで必要なモジュールをインストールします。
npm i file-saver
npm i --save-dev @types/file-saverExcel読み込みページの実装
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>
</>
);
}ボタンを押すと、Excelブックを作成し、A1セルに文字と背景色を設定、ブラウザでダウンロードができるような実装となっています。
ダウンロードボタンを押すとExcelがダウンロードされ、実装通りのExcelファイルとなっていることが確認できました！
セルの操作については他にもできることがあるのでドキュメントを参照してください。 React Excel ライブラリ | セルの使用 | インフラジスティックス
まとめ
Ignite UI for React を使うことでExcelをそのまま表示したり、Excelブックを作成したりできます。 「とりあえずExcelみたいなの作ってほしい」という無茶振りに対応できるようになってください！
無料トライアルでコンポーネントと技術サポートの体験ができるのでぜひお試しください！ 無料トライアルの開始 | 開発ツール | インフラジスティックス・ジャパン株式会社
