HTM5 フォーム送信から PDF を生成 generate-pdf-from-htm-form-submission

この記事では、HTML5(Mobile Forms)フォームの送信から PDF を生成する手順について説明します。このデモでは、画像を HTML5 フォームに追加し、画像を最終的な PDF に結合するために必要な手順も説明します。

送信されたデータを XDP テンプレートに結合するには、次の手順を実行します。

HTML5 のフォーム送信を処理するサーブレットを作成する

  • このサーブレット内で、送信されたデータを取得する
  • このデータを XDP テンプレートと結合して PDF を生成する
  • PDF を呼び出し元のアプリケーションにストリーミングする

次に、リクエストから送信されたデータを抽出するサーブレットコードを示します。次に、カスタム documentServices .mobileFormToPDF メソッドを呼び出して PDF を取得します。

protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) {
  StringBuffer stringBuffer = new StringBuffer();
  String line = null;
  try {
   InputStreamReader isReader = new InputStreamReader(request.getInputStream(), "UTF-8");
   BufferedReader reader = new BufferedReader(isReader);
   while ((line = reader.readLine()) != null)
    stringBuffer.append(line);
  } catch (Exception e) {
   System.out.println("Error");
  }
  String xmlData = new String(stringBuffer);
  Document generatedPDF = documentServices.mobileFormToPDF(xmlData);
  try {

   InputStream fileInputStream = generatedPDF.getInputStream();
   response.setContentType("application/pdf");
   response.addHeader("Content-Disposition", "attachment; filename=AemFormsRocks.pdf");
   response.setContentLength((int) fileInputStream.available());
   OutputStream responseOutputStream = response.getOutputStream();
   int bytes;
   while ((bytes = fileInputStream.read()) != -1) {
    responseOutputStream.write(bytes);
   }
   responseOutputStream.flush();
   responseOutputStream.close();

  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }

 }

モバイルフォームに画像を追加し、その画像を PDF に表示するには、次を使用します。

XDP テンプレート - XDP テンプレートに btnAddImage という画像フィールドとボタンを追加しました。次のコードは、カスタムプロファイル内の btnAddImage のクリックイベントを処理します。このスライドに示すように、「ファイル 1 クリック」イベントのトリガーは次のとおりです。このユースケースを実現するために XDP でコーディングは必要ありません。

$(".btnAddImage").click(function(){

$("#file1").click();

});

カスタムプロファイル。カスタムプロファイルを使用すると、モバイルフォームの HTML DOM オブジェクトの操作が容易になります。非表示のファイル要素が HTML.jsp に追加されます。ユーザーが「写真を追加」をクリックすると、ファイル要素のクリックイベントがトリガーされます。これにより、ユーザーは添付する写真を参照して選択できます。次に、JavaScript の FileReader オブジェクトを使用して、画像の base64 エンコードされた文字列を取得します。base64 画像文字列は、フォームのテキストフィールドに格納されます。フォームが送信されると、この値を抽出し、XML の img 要素に挿入します。その後、この XML を使用して XDP とマージし、最終的な PDF を生成します。

この記事で使用するカスタムプロファイルは、この記事のアセットの一部として使用できるようになっています。

function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                  window.formBridge.setFieldValue("xfa.form.topmostSubform.Page1.base64image",reader.result);
                    $('.img img').show();
                     $('.img img')
                        .attr('src', e.target.result)
                        .width(180)
                        .height(200)
                };

                reader.readAsDataURL(input.files[0]);
            }
        }

上記のコードは、file 要素のクリックイベントをトリガーすると実行されます。5 行目では、アップロードされたファイルの内容を base64 文字列として抽出し、テキストフィールドに格納します。この値は、フォームがサーブレットに送信される際に抽出されます。

次に、AEM でモバイルフォームの次のプロパティ(詳細)を設定します。

  • URL を送信 - http://localhost:4502/bin/handlemobileformsubmissionこれは、送信されたデータを XDP テンプレートと結合するサーブレットです。
  • HTML レンダリングプロファイル - 「AddImageToMobileForm」を選択していることを確認します。これにより、トリガーを使用して画像をフォームに追加します。

ご使用のサーバーでこの機能をテストするには、次の手順に従ってください。

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e