Generate PDF from HTM5 Form Submission generate-pdf-from-htm-form-submission

This article will walk you through the steps involved in generating pdf from an HTML5(aka Mobile Forms) form submission. This demo will also explain the steps needed to add an image to HTML5 form and merge the image into the final pdf.

To merge the submitted data into the xdp template we do the following

Write a servlet to handle the HTML5 form submission

The following is the servlet code which extracts the submitted data from the request. It then calls the custom documentServices .mobileFormToPDF method to get the 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();
  }

 }

To add image to mobile form and display that image in the pdf we have used the following

XDP Template - In the xdp template we added an image field and button called btnAddImage. The following code handles the click event of the btnAddImage in our custom profile. As you can see we trigger the file1 click event. No coding is needed in the xdp to accomplish this use case

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

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

});

Custom Profile. Using custom profile it makes it easier to manipulate HTML DOM objects of the mobile form. A hidden file element is added to the HTML.jsp. When the user clicks on “Add Your Photo” we trigger the click event of the file element. This allows the user to browse and select the photograph to attach. We then use javascript FileReader object to get the base64 encoded string of the image. The base64 image string is stored in the text field in the form. When the form is submitted we extract this value and insert it in the img element of the XML. This XML is then used to merge with the xdp to generate the final pdf.

The custom profile used for this article has been made available to you as part of this article’s assets.

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]);
            }
        }

The above code is executed when we trigger the click event of the file element. Line 5 we extract the content of the uploaded file as base64 string and store in the text field. This value is then extracted when the form is submitted to our servlet.

We then configure the following properties(advanced) of our mobile form in AEM

To test this capability on your own server please follow the following steps: