Questo articolo illustra i passaggi necessari per generare pdf da un modulo HTML5 (aka Mobile Forms). Questa demo illustra anche i passaggi necessari per aggiungere un’immagine al modulo HTML5 e unire l’immagine al pdf finale.
Per unire i dati inviati nel modello xdp, procedere come segue
Scrivere un servlet per gestire l’invio del modulo HTML5
Di seguito è riportato il codice del servlet che estrae i dati inviati dalla richiesta. Chiama quindi il metodo personalizzato documentServices .mobileFormToPDF per ottenere il pdf.
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();
}
}
Per aggiungere un’immagine al modulo mobile e visualizzarla nel pdf, si utilizza quanto segue
Modello XDP: nel modello xdp abbiamo aggiunto un campo immagine e un pulsante denominato btnAddImage. Il codice seguente gestisce l'evento click del btnAddImage nel nostro profilo personalizzato. Come puoi vedere, attiviamo l’evento click file1. Per eseguire questo caso d'uso non è necessaria alcuna codifica nell'xdp
$(".btnAddImage").click(function(){
$("#file1").click();
});
Profilo personalizzato. L’utilizzo di un profilo personalizzato facilita la manipolazione degli oggetti DOM HTML del modulo mobile. Un elemento di file nascosto viene aggiunto a HTML.jsp. Quando l'utente fa clic su "Aggiungi foto" si attiva l'evento click dell'elemento file. Questo consente all'utente di sfogliare e selezionare la foto da allegare. Quindi usiamo l'oggetto FileReader javascript per ottenere la stringa codificata base64 dell'immagine. La stringa immagine base64 viene memorizzata nel campo di testo del modulo. Quando il modulo viene inviato, estraiamo questo valore e lo inseriamo nell’elemento img dell’XML. Questo XML viene quindi utilizzato per unire con l'xdp per generare il pdf finale.
Il profilo personalizzato utilizzato per questo articolo è stato reso disponibile come parte delle risorse di questo articolo.
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]);
}
}
Il codice di cui sopra viene eseguito quando attiviamo l’evento click dell’elemento file . Nella riga 5 estraiamo il contenuto del file caricato come stringa base64 e lo memorizziamo nel campo di testo. Questo valore viene quindi estratto quando il modulo viene inviato al nostro servlet.
Quindi configuriamo le seguenti proprietà (avanzate) del modulo mobile in AEM
Per testare questa funzionalità sul tuo server segui i seguenti passaggi:
Distribuzione del pacchetto di sviluppo con il pacchetto utente del servizio
Scarica e installa il pacchetto associato a questo articolo.
Assicurati che l’URL di invio e il profilo di rendering di HTML siano impostati correttamente visualizzando la pagina delle proprietà del xdp
Aggiungi un’immagine al modulo e invia. Dovresti recuperare PDF con l'immagine al suo interno.