PDF aus HTML5-Formularübermittlung generieren

Dieser Artikel führt Sie durch die Schritte, die zum Generieren von PDF-Dateien aus einer HTML5 (auch Mobile Forms genannt)-Formularübermittlung 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 handhaben

  • Innerhalb dieses Servlets speichern Sie die gesendeten Daten
  • Zusammenführen dieser Daten mit der xdp-Vorlage zum Generieren von PDF
  • PDF-Datei an die aufrufende Anwendung zurücksenden

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

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 "file1 click"-Ereignis Trigger. Für dieses Anwendungsbeispiel ist in der xdp keine Kodierung 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 der Benutzer auf "Foto hinzufügen"klickt, wird das click -Ereignis des Dateielements Trigger. Dadurch kann der Benutzer das anzuhängende Foto durchsuchen und auswählen. Dann verwenden wir das JavaScript FileReader-Objekt, um die base64-kodierte 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 click -Ereignis des Dateielements Trigger 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 Eigenschaften (erweitert) unseres mobilen Formulars in AEM

  • Sende-URL - http://localhost:4502/bin/handlemobileformsubmission. Dies ist unser Servlet, das die gesendeten Daten mit der xdp-Vorlage zusammenführt
  • HTML Render Profile - Stellen Sie sicher, dass Sie "AddImageToMobileForm"auswählen. Dadurch wird der Code zum Hinzufügen eines Bildes zum Formular Trigger.

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

Auf dieser Seite