HTML2PDFを使用したレポートの作成
この記事は、OutSystems MVPであるFabio Fantato氏により執筆されました。
この記事では、HTML2PDFを使用してレポートを作成する方法について説明します。 また、この記事を読む前にこちらのFAQを読むことを推奨します。 このコンポーネントの機能 HTML2PDFは、HTMLページをPDFファイルに変換する外部ツールキット向けのラッパーです。このコンポーネントを使用することで、レポートを通常のWeb画面として作成し、提供されたアクションを呼び出してPDFファイルへの直接印刷をシミュレーションすることができます。
はじめに
この手順を実行する前に以下の注記をよくお読みください。
-
匿名画面 — 画面に匿名ロールが設定されている必要があります。これはセキュリティ上の懸念事項になりますが、必須です。
サーバー側のツールキットによって画面を直接描画する必要がありますが、ユーザーロールなどのセッション変数を共有しないようにする必要があります。
データの保護を強化するため、画面呼び出し用のワンタイムトークンを実装してデータを安全な状態に保つことを推奨します。
-
UIパターン — レスポンシブフレームワークにはこのツールキットに関する問題がいくつかあります。これは主にツールキットが、すべてのJavaScriptがページに読み込まれるのを待たないために発生します。また、CSS変数をサポートしていません。
このため、テーマとレポートのすべてのCSSクラスをカスタマイズして、レポート出力にすべてカスタマイズを加える必要があります。
-
ページの最後の行 — 各ページのテーブルの最後の行の動作を制御することができません。このため、生成されるpdfで行が途中で途切れる場合があります。
この動作を避けるには、以下のCSSを使用してツールキットが行全体をまとめて保持するように強制します。
.keeptogether {page-break-inside:avoid;}`
-
ページネーション/ヘッダーおよびフッター — これらの機能は、このコンポーネントではデフォルトで使用できません。
-
ヘッダーやフッターを含めるには、GeneratePDFプロパティにOtherArgsを含める必要があります。
“ — header-spacing 5 — header-html <URLヘッダーに置き換える> — footer-spacing 5 — footer-html <URL フッターに置き換える>”
また、ヘッダーとフッター用に2つの匿名画面を別に定義する必要があります。
-
ページネーション(ページの番号付け)を含めるには、以下のJavaScriptコードをヘッダー(またはフッター)に追加し、「page」スタイルクラスで現在のページを表すExpressionと「topage」スタイルクラスで合計ページを表すExpressionを定義する必要があります。
function pagination(){ var vars = {}; var x = document.location.search.substring(1).split('&'); for (var i in x){ var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]); } var x =['frompage','topage','page','webpage','section','subsection','subsubsection']; for (var i in x){ var y = document.getElementsByClassName(x[i]); for (var j = 0; j < y.length; ++j){ y[j].textContent = vars[x[i]]; } } }
-
-
クエリ — レポートのデータを操作するクエリやAggregateは、すべて一から作成する必要があります。
HTML2PDFの設定
このコンポーネントを適切に使用するには、コンポーネントをインストールし、Service Studioでいくつかの参照を追加する必要があります。
コンポーネントのインストール:
-
適切なバージョンのツールキットのバイナリとその他のライブラリをダウンロードします。これらは、クラウド、オンプレミス環境、Personal Environmentのどれを使用するかによって異なります。
ツールキットのリポジトリには複数のバージョンがありますが、コンポーネントのドキュメントに記載されたとおりのバージョンに従う必要があります。異なるバージョンを使用した場合、動作させるのは非常に困難です。 -
7zアーカイブを入手し、ローカルフォルダに解凍します。wkhtmltox\binフォルダ内に、wkhtmltopdf.exe、wkhtmltoimage.exe、wkhtmltox.dllの各ファイルがあります。
-
OutSystems環境にHTML2PDFコンポーネントをインストールし、アプリケーションを開いてセットアップを実行します。
インフラ内のすべての環境(Dev、QA、Prodなど)でセットアップ手順を実行する必要があります。 -
アプリケーションの管理パネルで、[administration]タブを選択します。
-
[PDF Generator]で、wkhtmltopdf.exeファイルを参照してアップロードします。[Image Generator]で、wkhtmltoimage.exeファイルを参照してアップロードします。最後に[Additional Binaries]で、wkhtmltox.dllファイルを参照してアップロードします。
これらを選択するとセットアップが完了し、レポートを作成できるようになります。
参照の構成
Service Studioで参照を構成するには、以下の手順を実行します。
-
Service Studioで、[Manage Dependencies]画面にアクセスします。
-
HtmlToPdfConverterのGeneratePDFアクションへの参照を追加します。
-
また、HHTPRequestHandlingのMakeAbsoluteURLとGetEntryURLへの参照も追加します。
-
選択を適用してセットアップを完了します。
レポートの作成
レポートを作成するには、以下の手順を実行します。
-
[Sample]画面を作成し、Anonymousロールを選択します。
-
レポートに含めるデータのAggregateを、画面のPreparationにドラッグします。この例では、連絡先情報を含むユーザーのリストを使用します。
-
画面に戻り、ウィジェットツリーで、この画面からレイアウトWebブロックを削除します。
-
Table Recordsウィジェットを画面に追加し、テーブルの列として[Surname]、[GivenName]、[City]、[State]、[Email]の各フィールドを追加します。 先ほど追加したAggregateのデータをソースレコードとして使用します。
これで、レポートにエクスポートするデータができました。レポートを生成するには、以下の手順を実行します。
-
レポートを呼び出すための新しい画面を作成します。
-
画面のPreparationで、GeneratePDFサーバーアクションを呼び出します。そのパラメータでMakeAbsoluteURLを使用し、レポートを含める画面のGetEntryURLをパラメータとして渡します。
情報:ツールキットを適切に実行するには、画面への絶対URLが必要です。

-
同じフローで、Endノードを削除し、Downloadアクションと以下のパラメータを追加します。
-
アプリケーションを実行し、作成した画面に移動してPDFをダンロードします。
出力は以下のようになります。