PDF genereren op basis van HTM5-formulierverzending generate-pdf-from-htm-form-submission

In dit artikel worden de stappen beschreven die nodig zijn voor het genereren van pdf-bestanden via een HTML5-formulierverzending (ook bekend als Mobile Forms). In deze demo worden ook de stappen uitgelegd die nodig zijn om een afbeelding toe te voegen aan het HTML5-formulier en de afbeelding samen te voegen in de uiteindelijke PDF.

Om de voorgelegde gegevens in het xdp malplaatje samen te voegen doen wij het volgende

Schrijf een servlet om de HTML5-formulierverzending te verwerken

  • In deze server worden de verzonden gegevens opgeslagen
  • Deze gegevens samenvoegen met de xdp-sjabloon om pdf te genereren
  • De pdf terugsturen naar de opvragende toepassing

Hier volgt de servletcode die de ingediende gegevens uit het verzoek extraheert. Vervolgens wordt de aangepaste methode documentServices.mobileFormToPDF aangeroepen om de PDF op te halen.

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

 }

We hebben het volgende gebruikt om een afbeelding toe te voegen aan een mobiel formulier en die afbeelding weer te geven in de PDF

XDP-sjabloon - In de xdp-sjabloon hebben we een afbeeldingsveld en een knop met de naam btnAddImage toegevoegd. De volgende code handelt de klikgebeurtenis van btnAddImage in ons douaneprofiel af. Zoals u kunt zien, activeren wij de file1 klikgebeurtenis. Er is geen codering nodig in de xdp om deze use-case te voltooien

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

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

});

Aangepast profiel. Met een aangepast profiel kunt u HTML DOM-objecten van het mobiele formulier gemakkelijker bewerken. Een verborgen dossierelement wordt toegevoegd aan HTML.jsp. Wanneer de gebruiker op "Uw foto toevoegen" klikt, wordt de gebeurtenis click van het bestandselement geactiveerd. Op deze manier kan de gebruiker door de foto bladeren en de foto selecteren die u wilt bijvoegen. Vervolgens gebruiken we het Javascript FileReader-object om de base64-gecodeerde tekenreeks van de afbeelding op te halen. De base64-afbeeldingstekenreeks wordt opgeslagen in het tekstveld in het formulier. Wanneer het formulier wordt verzonden, extraheren wij deze waarde en voegen u deze in het img-element van de XML in. Deze XML wordt vervolgens gebruikt om samen te voegen met de xdp om de uiteindelijke PDF te genereren.

Het aangepaste profiel dat voor dit artikel wordt gebruikt, is beschikbaar gesteld als onderdeel van de elementen van dit artikel.

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

De bovenstaande code wordt uitgevoerd wanneer de gebeurtenis click van het bestandselement wordt geactiveerd. Met regel 5 extraheert u de inhoud van het geĆ¼ploade bestand als base64-tekenreeks en slaat u dit op in het tekstveld. Deze waarde wordt vervolgens opgehaald wanneer het formulier bij ons servlet wordt ingediend.

Vervolgens configureren we de volgende (geavanceerde) eigenschappen van ons mobiele formulier in AEM

  • URL verzenden - http://localhost:4502/bin/handlemobileformsubmission. Dit is onze servlet die de voorgelegde gegevens met het xdp malplaatje zal samenvoegen
  • HTML Renderprofiel - Zorg ervoor dat u "AddImageToMobileForm" selecteert. Hierdoor wordt de code geactiveerd om afbeelding aan het formulier toe te voegen.

Voer de volgende stappen uit om deze mogelijkheid op uw eigen server te testen:

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e