HTML2PDFを使用したレポートの作成

Last updated
Save as PDF

この記事は、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が必要です。

![](images/report-generation-flow-ss.png)

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

出力は以下のようになります。

サンプル

Forgeには、PDF Header and Footerを使用したカスタムテーマ、ヘッダー、ページネーションを含むサンプルがあります。

Training

Documentation