Visualizza documento record in linea

Ultimo aggiornamento: 14 luglio 2024

Creato per:

  • Esperto
  • Sviluppatore

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 è stata utilizzata l'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 codice seguente viene eseguito quando si fa clic sul pulsante di selezione viewPDF. 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 incorporata.

$(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

Puoi utilizzare uno degli strumenti online gratuiti per generare XSD dai dati xml generati nel passaggio precedente.

Carica il modello

Assicurati di caricare il modello xdp in AEM Forms utilizzando il 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
Accertatevi di denominare la casella di controllo viewPDF.
Configura il componente incorpora-pdf come illustrato nella schermata seguente
pdf-incorporato

Incorpora chiave API PDF: è la chiave che puoi utilizzare per incorporare il PDF. Questa chiave funziona solo con localhost. Puoi creare la tua chiave e associarla 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 incorporato.

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 embedded pdf

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

   }

}