從HTM5表單提交產生PDF generate-pdf-from-htm-form-submission

本文將逐步引導您完成從HTML5 (亦稱為Mobile Forms)表單提交產生PDF的步驟。 此示範也會說明將影像新增至HTML5表單及將影像合併至最終pdf所需的步驟。

若要將提交的資料合併至xdp範本,請執行下列動作

撰寫Servlet以處理HTML5表單提交

  • 在此servlet內取得提交的資料
  • 將此資料與xdp範本合併以產生pdf
  • 將pdf串流回呼叫的應用程式

以下是從請求中擷取已提交資料的servlet程式碼。 然後它會呼叫自訂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的click事件。 如您所見,我們會觸發file1點選事件。 xdp中不需要編碼即可完成此使用案例

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

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

});

自訂設定檔. 使用自訂設定檔可讓您更輕鬆地操控行動表單的HTMLDOM物件。 隱藏的檔案元素會新增至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]);
            }
        }

上述程式碼會在我們觸發檔案元素的點選事件時執行。 第5行:我們將上傳檔案的內容擷取為base64字串,並儲存在文字欄位中。 然後,當表單提交至我們的servlet時,就會擷取此值。

然後,我們會在AEM中設定行動表單的下列屬性(進階)

  • 提交URL - http://localhost:4502/bin/handlemobileformsubmission。 這是我們的servlet,會將提交的資料與xdp範本合併
  • HTML演算設定檔 — 請務必選取「AddImageToMobileForm」。 這會觸發程式碼,將影像新增至表單。

若要在您自己的伺服器上測試此功能,請遵循下列步驟:

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