本文将引导您完成从HTML5(又称Mobile Forms)表单提交生成PDF时涉及的步骤。 此演示还将说明将图像添加到HTML5表单并将图像合并到最终PDF中所需的步骤。

要将提交的数据合并到xdp模板中，请执行以下操作

编写一个servlet来处理HTML5表单提交

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();
        
自定义配置文件。 使用自定义配置文件，可以更轻松地处理移动设备表单的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”。 这将触发代码以将图像添加到表单。