Generar PDF desde envío de formulario HTML5 generate-pdf-from-htm-form-submission

Este artículo le guiará por los pasos necesarios para generar el pdf a partir de un envío de formulario HTML5 (también conocido como Forms móvil). En esta demostración también se explican los pasos necesarios para agregar una imagen al formulario HTML5 y combinarla en el PDF final.

Para combinar los datos enviados en la plantilla xdp, realizamos lo siguiente

Escribir un servlet para gestionar el envío de formularios HTML5

El siguiente es el código de servlet que extrae los datos enviados de la solicitud. A continuación, llama al método personalizado documentServices .mobileFormToPDF para obtener el 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();
  }

 }

Para agregar una imagen al formulario móvil y mostrarla en el PDF, hemos utilizado lo siguiente

Plantilla XDP: en la plantilla xdp hemos añadido un campo de imagen y un botón llamado btnAddImage. El siguiente código administra el evento de clic de btnAddImage en el perfil personalizado. Como puede ver, almacenamos en déclencheur el evento de clic file1. No se necesita codificación en el xdp para realizar este caso de uso

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

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

});

Perfil personalizado. El uso de perfiles personalizados facilita la manipulación de los objetos DOM de HTML del formulario móvil. Se agrega un elemento de archivo oculto a HTML.jsp. Cuando el usuario hace clic en "Añadir su foto", almacenamos en déclencheur el evento de clic del elemento de archivo. Esto permite al usuario examinar y seleccionar la fotografía que desea adjuntar. A continuación, se utiliza el objeto FileReader de javascript para obtener la cadena codificada en base64 de la imagen. La cadena de imagen base64 se almacena en el campo de texto del formulario. Cuando se envía el formulario, extraemos este valor e lo insertamos en el elemento img del XML. A continuación, este XML se utiliza para combinar con el xdp para generar el pdf final.

El perfil personalizado utilizado para este artículo se ha puesto a su disposición como parte de los recursos de este artículo.

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

El código anterior se ejecuta cuando almacenamos en déclencheur el evento de clic del elemento de archivo. Línea 5: extraemos el contenido del archivo cargado como una cadena base64 y lo almacenamos en el campo de texto. Este valor se extrae cuando se envía el formulario a nuestro servlet.

Luego configuramos las siguientes propiedades (avanzadas) de nuestro formulario móvil en AEM

Para probar esta capacidad en su propio servidor, siga los siguientes pasos: