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のコードを実行します。

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

今回の記事は以上です。

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

完