Skip to main content

 

 

 

 

 
Language:

 

 
 
 
OutSystems

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でいくつかの参照を追加する必要があります。

コンポーネントのインストール:

  1. 適切なバージョンのツールキットのバイナリとその他のライブラリをダウンロードします。これらは、クラウド、オンプレミス環境、Personal Environmentのどれを使用するかによって異なります。


    ツールキットのリポジトリには複数のバージョンがありますが、コンポーネントのドキュメントに記載されたとおりのバージョンに従う必要があります。異なるバージョンを使用した場合、動作させるのは非常に困難です。
  2. 7zアーカイブを入手し、ローカルフォルダに解凍します。wkhtmltox\binフォルダ内に、wkhtmltopdf.exe、wkhtmltoimage.exe、wkhtmltox.dllの各ファイルがあります。

  3. OutSystems環境にHTML2PDFコンポーネントをインストールし、アプリケーションを開いてセットアップを実行します。

    インフラ内のすべての環境(Dev、QA、Prodなど)でセットアップ手順を実行する必要があります。
  4. アプリケーションの管理パネルで、[administration]タブを選択します。

  5. [PDF Generator]で、wkhtmltopdf.exeファイルを参照してアップロードします。[Image Generator]で、wkhtmltoimage.exeファイルを参照してアップロードします。最後に[Additional Binaries]で、wkhtmltox.dllファイルを参照してアップロードします。

これらを選択するとセットアップが完了し、レポートを作成できるようになります。

参照の構成

Service Studioで参照を構成するには、以下の手順を実行します。

  1. Service Studioで、[Manage Dependencies]画面にアクセスします。

  2. HtmlToPdfConverterのGeneratePDFアクションへの参照を追加します。

  3. また、HHTPRequestHandlingのMakeAbsoluteURLとGetEntryURLへの参照も追加します。

  4. 選択を適用してセットアップを完了します。

レポートの作成

レポートを作成するには、以下の手順を実行します。

  1. [Sample]画面を作成し、Anonymousロールを選択します。

  2. レポートに含めるデータのAggregateを、画面のPreparationにドラッグします。この例では、連絡先情報を含むユーザーのリストを使用します。

  3. 画面に戻り、ウィジェットツリーで、この画面からレイアウトWebブロックを削除します。

  4. Table Recordsウィジェットを画面に追加し、テーブルの列として[Surname]、[GivenName]、[City]、[State]、[Email]の各フィールドを追加します。 先ほど追加したAggregateのデータをソースレコードとして使用します。

これで、レポートにエクスポートするデータができました。レポートを生成するには、以下の手順を実行します。

  1. レポートを呼び出すための新しい画面を作成します。

  2. 画面のPreparationで、GeneratePDFサーバーアクションを呼び出します。そのパラメータでMakeAbsoluteURLを使用し、レポートを含める画面のGetEntryURLをパラメータとして渡します。

情報:ツールキットを適切に実行するには、画面への絶対URLが必要です。

![](images/report-generation-flow-ss.png)
  1. 同じフローで、Endノードを削除し、Downloadアクションと以下のパラメータを追加します。

  2. アプリケーションを実行し、作成した画面に移動してPDFをダンロードします。

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

サンプル

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

  • Was this article helpful?