日日是Oracle APEX: Excel

ラベル Excel の投稿を表示しています。すべての投稿を表示

2024年11月22日金曜日

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のアプリケーション作成の参考になれば幸いです。

完

2023年7月3日月曜日

Excelをアップロードしてフォームの穴埋めを行う

以下のような簡単なExcelシートをAPEXアプリケーションにアップロードし、その内容でフォームの穴埋めをします。

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

クラシック・レポートを使ってブラウザで穴埋めする実装と、APEXコレクションを使ってサーバー側で穴埋めする実装の２種類を試してみます。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はExcel Formとします。

クラシック・レポートを使う

空白ページを作成します。ページ定義の名前はClassic Reportとします。

フォームの穴埋めに使うExcelファイルを指定するページ・アイテムを作成します。

識別の名前はP2_FILE、タイプはファイル参照...を選びます。設定の記憶域のタイプとしてTable APEX_APPLICATION_TEMP_FILES、ファイルをパージするタイミングとしてEnd of Sessionを選びます。表示形式は任意ですが、ここではInline File Browseを選択しています。

セッション・ステートのストレージはセッションごと(永続)を選択します。

ファイルをアップロードするボタンを作成します。

識別のボタン名はSUBMIT、ラベルはSubmitとします。動作のアクションはページの送信です。

Excelシートから取り出した値を保持するページ・アイテムを作成します。

ページ・アイテムP2_NAMEに氏名、P2_DEPTに所属、P2_PURPOSEに目的、P2_AMOUNTに金額を保持します。P2_NAME、P2_DEPT、P2_PURPOSEのタイプはテキスト・フィールド、P2_AMOUNTは数値フィールドとします。

セッション・ステートのストレージはリクエストごと(メモリーのみ)とします。