Visualizza documento record in linea

Un caso d’uso comune è la visualizzazione di un documento PDF con i dati immessi dal compilatore del modulo.

Per eseguire questo caso d’uso abbiamo utilizzato API di incorporamento Adobe PDF.

Per completare l’integrazione sono stati eseguiti i seguenti passaggi

Crea un componente personalizzato per visualizzare le PDF in linea

È stato creato un componente personalizzato (embed-pdf) per incorporare il pdf restituito dalla chiamata POST.

Libreria client

Il seguente codice viene eseguito quando viewPDF clic sul pulsante della casella di controllo. I dati del modulo adattivo e il nome del modello vengono passati all’endpoint per generare il pdf. Il pdf generato viene quindi visualizzato nel compilatore di moduli utilizzando la libreria JavaScript PDF da incorporare.

$(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")
                    })


            }
        });
    });



});

Genera dati di esempio per XDP

• Apri XDP in AEM Forms Designer.
• Fai clic su File | Proprietà modulo | Anteprima
• Fai clic su Genera dati di anteprima
• Fai clic su Genera
• Fornisci un nome file significativo, ad esempio "form-data.xml"

Generare XSD dai dati xml

È possibile utilizzare uno qualsiasi degli strumenti online gratuiti per genera XSD dai dati xml generati nel passaggio precedente.

Carica il modello

Assicurati di caricare il modello xdp in AEM Forms utilizzo del pulsante crea

Creare un modulo adattivo

Crea un modulo adattivo basato sull’XSD del passaggio precedente.
Aggiungi una nuova scheda all’adattatore. Aggiungi un componente casella di controllo e un componente pdf da incorporare a questa scheda Assicurati di denominare la vista casella di controllo PDF.
Configura il componente incorpora-pdf come illustrato nella schermata seguente

Incorpora chiave API PDF : questa è la chiave che puoi utilizzare per incorporare il PDF. Questa chiave funziona solo con localhost. Puoi creare la tua chiave e associarlo ad un altro dominio.

Endpoint che restituisce il PDF : questo è il servlet personalizzato che unirà i dati con il modello xdp e restituirà il pdf.

Nome modello : percorso dell’xdp. In genere, viene memorizzato nella cartella formsanddocuments.

Nome file PDF : stringa che verrà visualizzata nel componente pdf da incorporare.

Creare un servlet personalizzato

È stato creato un servlet personalizzato per unire i dati con il modello XDP e restituire il pdf. Il codice per eseguire questa operazione è elencato di seguito. Il servlet personalizzato fa parte del bundle incorporpdf

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

   }

}

Distribuire l’esempio sul server

Per eseguire il test sul server locale, attieniti alla seguente procedura:

1. Scaricare e installare il bundle di incorporpdf.
   Questo ha il servlet per unire i dati con il modello XDP e riportare in streaming il pdf.
2. Aggiungi il percorso /bin/getPDFToEmbed nella sezione dei percorsi esclusi del filtro CSRF di Granite di Adobe utilizzando ConfigMgr AEM. Nell’ambiente di produzione si consiglia di utilizzare il Framework di protezione CSRF
3. Importare la libreria client e il componente personalizzato
4. Importare il modulo e il modello adattivo
5. Anteprima modulo adattivo
6. Compila alcuni campi del modulo
7. Consente di passare alla scheda Visualizza PDF. Selezionare la casella di controllo Visualizza PDF. Dovresti visualizzare un pdf nel modulo compilato con i dati del modulo adattivo