Generieren von PDF aus HTML5-Formularübermittlung generate-pdf-from-htm-form-submission

Dieser Artikel führt Sie durch die Schritte, die zum Generieren von PDF-Dateien aus einer HTML5-Formularübermittlung (auch Mobile Forms genannt) erforderlich sind. In dieser Demo werden auch die Schritte erläutert, die zum Hinzufügen eines Bildes zum HTML5-Formular und zum Zusammenführen des Bildes in das endgültige PDF-Dokument erforderlich sind.

Gehen Sie wie folgt vor, um die übermittelten Daten mit der XDP-Vorlage zusammenzuführen:

Schreiben Sie ein Servlet, um die HTML5-Formularübermittlung zu verarbeiten

Im Folgenden finden Sie den Servlet-Code, der die gesendeten Daten aus der Anfrage extrahiert. Anschließend ruft es die benutzerdefinierte Methode „documentServices .mobileFormToPDF“ auf, um das PDF-Dokument abzurufen.

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

 }

Um ein Bild zum mobilen Formular hinzuzufügen und dieses Bild im PDF-Dokument anzuzeigen, haben wir Folgendes verwendet:

Eine XDP-Vorlage: In der XDP-Vorlage haben wir ein Bildfeld und eine Schaltfläche namens „btnAddImage“ hinzugefügt. Der folgende Code verarbeitet das Klickereignis von btnAddImage in unserem benutzerdefinierten Profil. Wie Sie sehen können, wird das Klickereignis „file1“ ausgelöst. Für dieses Anwendungsbeispiel ist in der XDP keine Codierung erforderlich.

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

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

});

Benutzerdefiniertes Profil. Die Verwendung eines benutzerdefinierten Profils erleichtert die Bearbeitung von HTML-DOM-Objekten des mobilen Formulars. Ein ausgeblendetes Dateielement wird der HTML.jsp hinzugefügt. Wenn die Benutzenden auf „Foto hinzufügen“ klicken, wird das Klickereignis des Dateielements ausgelöst. Dadurch können die Benutzenden das anzuhängende Foto durchsuchen und auswählen. Dann verwenden wir das JavaScript FileReader-Objekt, um die base64-codierte Zeichenfolge des Bildes zu erhalten. Die base64-Bildzeichenfolge wird im Textfeld im Formular gespeichert. Wenn das Formular übermittelt wird, extrahieren wir diesen Wert und fügen ihn in das img-Element der XML ein. Diese XML wird dann verwendet, um mit der XDP zusammenzuführen und das endgültige PDF zu generieren.

Das für diesen Artikel verwendete benutzerdefinierte Profil wurde Ihnen als Teil der Assets dieses Artikels zur Verfügung gestellt.

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

Der obige Code wird ausgeführt, wenn das Klickereignis des Dateielements ausgelöst wird. In Zeile 5 wird der Inhalt der hochgeladenen Datei als base64-Zeichenfolge extrahiert und im Textfeld gespeichert. Dieser Wert wird dann extrahiert, wenn das Formular an unser Servlet gesendet wird.

Anschließend konfigurieren wir die folgenden (erweiterten) Eigenschaften unseres mobilen Formulars in AEM:

Gehen Sie wie folgt vor, um diese Funktion auf Ihrem eigenen Server zu testen: