Oracle APEX のブラウザ印刷について

Oracle APEX

Oracle APEX で印刷を実施したい場合、弊社では基本的にサードパーティーとの連携を推奨しています。印刷データをJSON形式で外部の帳票印刷系の機能へ渡し、pdfやプリンタでの出力を行うような形式です。

もう少し気軽に印刷機能を付けたいという方向けに、ブラウザでの印刷について英語のブログが上がっていましたので、クラシック・レポート、対話モード・レポート部分を翻訳・説明したいと思います。

以下参照元記事（フォームについても記載されています）
https://www.sotful.com/sandroferreira-blog/quickest-print-friendly-in-oracle-apex
SOTFUL company – Blog

印刷動作の概要

印刷ボタンを定義し、ボタンに動的アクションを定義し、javascriptにより不要な部分を非表示にした後、ブラウザの印刷機能を立ち上げ印刷します。完了後、非表示部分を再表示します。

やること自体はそんなに難しくありません。
動作対象は 42: Universal Theme です。

アプリケーション・ビルダーによる設定

1.印刷ボタンの追加

アプリケーションに印刷ボタンを追加します。参照元のサイトでは、アイコン付きのテキストボタンを利用していますが、好きなボタンを配置してください。

2.動的アクションの定義

印刷ボタンの動的アクション

追加したボタンに動的アクションを定義します。

作成した動的アクションを以下のように定義します。

識別 > 名前: 印刷実行
タイミング > イベント: クリック
タイミング > 選択タイプ: ボタン
タイミング > ボタン: [作成したボタン]

Trueアクションについて以下のように定義します。

識別 > アクション: JavaScriptコードの実行
設定 > コード: [下に記載のもの]
実行オプション > 初期化時に実行: いいえ

「設定 > コード」には以下をコピーしてください。実行している内容がわかるようにコメントを日本語にして少し詳しくしておきました。

//// 左側ナビゲーションバーの折り畳み ////

// ハンバーガーメニュー初期状態の記録用変数
var navCollapsed = 0;
if ($("body").hasClass("js-navExpanded")) {
    // 左側メニューが開いていた場合はハンバーガーメニューをクリックして閉じる（左側余白の削除）
    $("#t_Button_navControl").click();
    navCollapsed = 1;
};


//// 不要部分の非表示 ////

// ナビゲーションバーの非表示（上部メニュー）
$("#t_Header").hide();

// ナビゲーションメニューの非表示（左側ハンバーガーメニュー）
$("#t_Body_nav").hide();

// パンくずリスト非表示
$("#t_Body_title").hide();

// パンくずリスト高さ調整用divの非表示
$("#t_Body_content_offset").hide();

// カラム: ページ編集非表示
$(".apex-edit-page").hide();

// カラム: 鉛筆マーク非表示
$(".apex-edit-pencil").hide();

// カラム: 対話モード・レポート用検索バー非表示
$(".a-IRR-toolbar").hide();

// カラム: 対話モード・レポート用リンク非表示
$("#LINK").hide();

// カラム: 対話モード・レポート用リンク属性非表示
$('td[headers="LINK"]').hide();

// ダウンロードリンク非表示
$(".t-Report-links").hide();

// ボタン非表示
$(".t-Button").hide();

// フッター非表示
$(".t-Footer").hide();


//// ブラウザの印刷呼び出し ////
window.print();


//// 非表示にしたものを再表示 ////

// ナビゲーションバーの表示（上部メニュー）
$("#t_Header").show();

// ナビゲーションメニューの表示（左側ハンバーガーメニュー）
$("#t_Body_nav").show();

// パンくずリスト表示
$("#t_Body_title").show();

// パンくずリスト高さ調整用divの表示
$("#t_Body_content_offset").show();

// カラム: ページ編集表示
$(".apex-edit-page").show();

// カラム: 鉛筆マーク表示
$(".apex-edit-pencil").show();

// カラム: 対話モード・レポート用検索バー表示
$(".a-IRR-toolbar").show();

// カラム: 対話モード・レポート用リンク表示
$("#LINK").show();

// カラム: 対話モード・レポート用リンク属性表示
$('td[headers="LINK"]').show();

// ダウンロードリンク表示
$(".t-Report-links").show();

// ボタン表示
$(".t-Button").show();

// フッター表示
$(".t-Footer").show();


//// ハンバーガーメニューを閉じた場合は再度開く ////
if ( navCollapsed == 1 ) {
    // ハンバーガーメニューをクリックして開く
    $("#t_Button_navControl").click();
}

3.印刷サイズの設定

印刷したいサイズにするため、ページ全体設定のCSSに以下の設定を行います。
ここではA4サイズの横で定義しています。

CSS > インライン: [下に記載のもの]

@page {
  size: A4 landscape;
  margin: 0;
}

MDNで指定可能な値を参照してください。
https://developer.mozilla.org/ja/docs/Web/CSS/@page/size
MDN Web Docs

実際の印刷については、ブラウザによって動作が異なることや、横幅が足りないと印刷が見切れるなど細かい調整が効かない部分などがあります。印刷位置の細やかな指定などをしたい場合は、サードパーティーなりの印刷機能へ引き渡すのが最善かと思います。

上記で終わりです。実際に実行してみると、必要な印刷対象が絞られていることがわかると思います。必要があれば、Google Chrome等の開発者機能でElementsを参照しながらカスタマイズしてください。