Danfo.jsとGrid.jsを使ってExcelをアップロードせずにプレビューする

TensorFlow.jsとの関連でDanfo.jsを使う機会がありました。DataFramesやTensorsを扱うのが主な用途のようですが、Excelを読むAPIがあったので、Grid.jsと組み合わせてExcelのプレビューを実装してみました。プレビューはブラウザで完結しているので、Excelファイルはサーバーにアップロードしません。

作成したアプリケーションは以下のように動作します。

今回作成したサンプルのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/preview-excel-with-danfo-js-and-grid-js.zip

空のAPEXアプリケーションにデフォルトで作成されるホーム・ページに、すべての機能を実装しています。

ページ・プロパティのJavaScriptのファイルURLに以下を記述します。Danfo.jsとGrid.jsのライブラリをページにロードしています。

https://cdn.jsdelivr.net/npm/danfojs/lib/bundle.min.js

https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.production.min.js

ファンクションおよびグローバル変数の宣言に以下を記述します。変数elemは、Excelの内容をプレビューするリージョンを保持します。

var elem;

ページ・ロード時に実行に以下を記述します。プレビューは静的コンテンツのリージョン（に子ノードを作成して）にプレビューしますが、その要素をelemに取得します。Grid.jsによるグリッド上でページ送りをする際にページ番号をクリックしますが、そのときにページの送信が行われないように、イベントのデフォルトの動作をキャンセルしています。

elem = document.getElementById("grid");
// Grid.jsでページングする際にページの送信を行わない。
elem.addEventListener('click', function(event) {
    event.preventDefault();
});

Grid.jsが必要とするCSS設定ファイルを、CSSのファイルURLに設定します。

https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css

ページ・プロパティへの設定は以上です。

プレビューするExcelファイルを選択するページ・アイテムをP1_EXCELとして作成します。タイプはファイルのアップロードです。このサンプル・アプリケーションでは、選択したファイルをサーバーにアップロードすることはありません。

サーバーに送信する場合は、ストレージのタイプやファイルをパージするタイミングなどを適切に設定します。

プレビューを表示するリージョンを作成します。タイプは静的コンテンツ、外観のテンプレートとして、装飾の無いBlank with Attributes (No Grid)を選んでいます。静的IDとしてgridを設定します。

ページ・アイテムP1_EXCELで選択したファイルを、リージョンGridにプレビューするボタンを作成します。

ボタン名はPREVIEW、動作のアクションは動的アクションで定義を選択します。

ボタンPREVIEWをクリックしたときに、以下のJavaScriptのコードを実行します。

	const file = document.getElementById("P1_EXCEL").files[0];
	dfd.readExcel(file).then((df) => {
	// remove if preview element is exist.
	if (elem.firstChild) {
	elem.removeChild(elem.firstChild);
	};
	// create new preview element.
	const preview = document.createElement("div");
	const grid = new gridjs.Grid({
	columns: df.$columns,
	data: df.$data,
	pagination: {
	enabled: true,
	limit: 4
	}
	}).render(preview);
	elem.appendChild(preview);
	});

view raw preview-execl-with-danfo-grid.js hosted with ❤ by GitHub

以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

今回の記事は以上です。

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完