Mostrar DoR en línea

Un caso de uso común es mostrar un documento pdf con los datos introducidos por el usuario que rellena el formulario.

Para llevar a cabo este caso de uso, se ha utilizado la API de incrustación de Adobe PDF.

Se han realizado los siguientes pasos para completar la integración

Crear un componente personalizado para mostrar el PDF en línea

Se ha creado un componente personalizado (incrustado-pdf) para incrustar el PDF devuelto por la llamada del POST.

Biblioteca de cliente

El siguiente código se ejecuta cuando se hace clic en el botón de casilla de verificación viewPDF. Pasamos los datos del formulario adaptable, el nombre de la plantilla, al punto final para generar el pdf. A continuación, el PDF generado se muestra al usuario que rellena el formulario mediante la biblioteca JavaScript de PDF incrustados.

$(document).ready(function() {

    $(".viewPDF").click(function() {
        console.log("view pdfclicked");
        window.guideBridge.getDataXML({
            success: function(result) {
                var obj = new FormData();
                obj.append("data", result.data);
                obj.append("template", document.querySelector("[data-template]").getAttribute("data-template"));
                const fetchPromise = fetch(document.querySelector("[data-endpoint]").getAttribute("data-endpoint"), {
                        method: "POST",
                        body: obj,
                        contentType: false,
                        processData: false,

                    })
                    .then(response => {

                        var adobeDCView = new AdobeDC.View({
                            clientId: document.querySelector("[data-apikey]").getAttribute("data-apikey"),
                            divId: "adobe-dc-view"
                        });
                        console.log("In preview file");
                        adobeDCView.previewFile(

                            {
                                content: {
                                    promise: response.arrayBuffer()
                                },
                                metaData: {
                                    fileName: document.querySelector("[data-filename]").getAttribute("data-filename")
                                }
                            }
                        );


                        console.log("done")
                    })


            }
        });
    });



});

Generar datos de ejemplo para el XDP

  • Abra el XDP en AEM Forms Designer.
  • Haga clic en Archivo | Propiedades del formulario | Previsualizar
  • Haga clic en Generar datos de previsualización
  • Haga clic en Generar
  • Proporcionar un nombre de archivo significativo como "form-data.xml"

Generar XSD a partir de los datos xml

Puede usar cualquiera de las herramientas en línea gratuitas para generar XSD a partir de los datos xml generados en el paso anterior.

Cargar la plantilla

Asegúrese de cargar la plantilla xdp en AEM Forms con el botón Crear

Crear formulario adaptable

Cree un formulario adaptable basado en el XSD del paso anterior.
Agregue una nueva pestaña al formulario adaptable. Añadir un componente Casilla de verificación y un componente Insertar PDF en esta pestaña
Asegúrese de asignar un nombre a la casilla de verificación viewPDF.
Configure el componente incrustado-pdf como se muestra en la captura de pantalla siguiente
incrustar-pdf

Clave de API de PDF incrustado: esta es la clave que puede utilizar para incrustar el PDF. Esta clave solo funcionará con localhost. Puede crear su propia clave y asociarla a otro dominio.

El extremo devuelve el pdf: Este es el servlet personalizado que combinará los datos con la plantilla xdp y devolverá el pdf.

Nombre de plantilla: esta es la ruta al xdp. Normalmente, se almacena en la carpeta formsanddocuments.

Nombre de archivo del PDF: esta es la cadena que aparecerá en el componente incrustado de PDF.

Crear servlet personalizado

Se ha creado un servlet personalizado para combinar los datos con la plantilla XDP y devolver el PDF. El código para lograrlo se enumera a continuación. El servlet personalizado forma parte del paquete incrupdf

import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.StringReader;
import java.io.StringWriter;
import javax.servlet.Servlet;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import javax.xml.xpath.XPath;
import javax.xml.xpath.XPathConstants;
import javax.xml.xpath.XPathFactory;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import org.xml.sax.InputSource;
import com.adobe.aemfd.docmanager.Document;
import com.adobe.fd.output.api.OutputService;

package com.embedpdf.core.servlets;
@Component(service = {
   Servlet.class
}, property = {
   "sling.servlet.methods=post",
   "sling.servlet.paths=/bin/getPDFToEmbed"
})
public class StreamPDFToEmbed extends SlingAllMethodsServlet {
   @Reference
   OutputService outputService;
   private static final long serialVersionUID = 1 L;
   private static final Logger log = LoggerFactory.getLogger(StreamPDFToEmbed.class);

   protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
      String xdpName = request.getParameter("template");
      String formData = request.getParameter("data");
      log.debug("in doPOST of Stream PDF Form Data is >>> " + formData + " template is >>> " + xdpName);

      try {

         XPathFactory xfact = XPathFactory.newInstance();
         XPath xpath = xfact.newXPath();
         DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
         DocumentBuilder builder = factory.newDocumentBuilder();

         org.w3c.dom.Document xmlDataDoc = builder.parse(new InputSource(new StringReader(formData)));

         // get the data to merge with template

         Node afBoundData = (Node) xpath.evaluate("afData/afBoundData", xmlDataDoc, XPathConstants.NODE);
         NodeList afBoundDataChildren = afBoundData.getChildNodes();
         String afDataNodeName = afBoundDataChildren.item(0).getNodeName();
         Node nodeWithDataToMerge = (Node) xpath.evaluate("afData/afBoundData/" + afDataNodeName, xmlDataDoc, XPathConstants.NODE);
         StringWriter writer = new StringWriter();
         Transformer transformer = TransformerFactory.newInstance().newTransformer();
         transformer.transform(new DOMSource(nodeWithDataToMerge), new StreamResult(writer));
         String xml = writer.toString();
         InputStream targetStream = new ByteArrayInputStream(xml.getBytes());
         Document xmlDataDocument = new Document(targetStream);
         // get the template
         Document xdpTemplate = new Document(xdpName);
         log.debug("got the  xdp Template " + xdpTemplate.length());

         // use output service the merge data with template
         com.adobe.fd.output.api.PDFOutputOptions pdfOptions = new com.adobe.fd.output.api.PDFOutputOptions();
         pdfOptions.setAcrobatVersion(com.adobe.fd.output.api.AcrobatVersion.Acrobat_11);
         com.adobe.aemfd.docmanager.Document documentToReturn = outputService.generatePDFOutput(xdpTemplate, xmlDataDocument, pdfOptions);

         // stream pdf to the client

         InputStream fileInputStream = documentToReturn.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 (Exception e) {

         System.out.println("Error " + e.getMessage());
      }

   }

}

Implementar el ejemplo en el servidor

Para probar esto en el servidor local, siga los siguientes pasos:

  1. Descargar e instalar el paquete incrupdf.
    Tiene el servlet para combinar los datos con la plantilla XDP y transmitir el PDF de vuelta.
  2. Agregue la ruta /bin/getPDFToEmbed en la sección de rutas excluidas del filtro CSRF de Adobe AEM Granite usando ConfigMgr. En su entorno de producción se recomienda usar el marco de protección CSRF
  3. Importar la biblioteca de cliente y el componente personalizado
  4. Importar el formulario adaptable y la plantilla
  5. Vista previa de formulario adaptable
  6. Rellene algunos de los campos del formulario
  7. Vaya a la pestaña Ver PDF. Seleccione la casilla de verificación Ver PDF. Debería ver un PDF mostrado en el formulario rellenado con los datos del formulario adaptable
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e