Gerar PDF a partir do envio de formulário HTM5 generate-pdf-from-htm-form-submission

Este artigo o guiará pelas etapas relativas à geração de pdf a partir do envio de um formulário HTML5(também conhecido como Forms móvel). Esta demonstração também explicará as etapas necessárias para adicionar uma imagem ao formulário HTML5 e mesclar a imagem no pdf final.

Para unir os dados enviados ao modelo xdp, fazemos o seguinte

Escreva um servlet para lidar com o envio do formulário HTML5

  • Dentro deste servlet, obtenha os dados enviados
  • Mesclar estes dados com o modelo xdp para gerar o pdf
  • Transmita o pdf de volta para o aplicativo chamador

Veja a seguir o código do servlet que extrai os dados enviados da solicitação. Em seguida, ele chama o método documentServices .mobileFormToPDF personalizado para obter o 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();
  }

 }

Para adicionar imagem ao formulário móvel e exibir essa imagem no pdf, usamos o seguinte

Modelo XDP - no modelo xdp, adicionamos um campo de imagem e um botão chamado btnAddImage. O código a seguir lida com o evento de clique da imagem btnAddImage em nosso perfil personalizado. Como você pode ver, acionamos o evento de clique file1. Nenhuma codificação é necessária no xdp para realizar esse caso de uso

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

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

});

Perfil personalizado. Usar o perfil personalizado facilita a manipulação de objetos DOM HTML do formulário móvel. Um elemento de arquivo oculto é adicionado ao HTML.jsp. Quando o usuário clica em "Adicionar sua foto", acionamos o evento de clique do elemento do arquivo. Isso permite que o usuário navegue e selecione a fotografia a ser anexada. Em seguida, usamos o objeto FileReader do javascript para obter a string codificada em base64 da imagem. A cadeia de caracteres da imagem base64 é armazenada no campo de texto do formulário. Quando o formulário é enviado, extraímos esse valor e o inserimos no elemento img do XML. Esse XML é usado para mesclar com o xdp para gerar o pdf final.

O perfil personalizado usado para este artigo foi disponibilizado para você como parte dos ativos deste artigo.

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

O código acima é executado quando acionamos o evento de clique do elemento do arquivo. Linha 5 extraímos o conteúdo do arquivo carregado como base64 string e o armazenamos no campo de texto. Esse valor é então extraído quando o formulário é enviado ao nosso servlet.

Em seguida, configuramos as seguintes propriedades (avançadas) do nosso formulário móvel no AEM

  • Enviar URL - http://localhost:4502/bin/handlemobileformsubmission. Este é nosso servlet que mesclará os dados enviados com o modelo xdp
  • Perfil de renderização do HTML - Selecione "AddImageToMobileForm". Isso acionará o código para adicionar imagem ao formulário.

Para testar esse recurso em seu próprio servidor, siga as seguintes etapas:

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