Skip to main content

Como adicionar uma assinatura digital em um Report Print / template de Impressão / PDF

Em muitos cenários regulatórios ou operacionais, é necessário que um Report Print contenha uma assinatura do responsável, seja ela manual, digitalizada ou capturada via formulário.
Neste artigo, vamos mostrar como configurar um campo de assinatura e ajustá-lo visualmente no Report Print, de forma simples e flexível.

image.png

Visão geral da solução

A ideia é bem objetiva:

  1. Criar um formulário com um campo do tipo Assinatura

  2. Arrastar esse campo para dentro do Report Print

  3. Ajustar o tamanho e o posicionamento da assinatura usando o Código-Fonte do editor

1. Criando o campo de Assinatura no formulário

No formulário que alimenta o Report Print:

  • Crie um novo campo

  • Selecione o tipo: Assinatura

  • Salve o formulário

Esse campo será responsável por armazenar a imagem da assinatura associada ao operador ou responsável.

Importante: o campo aparecerá disponível como variável para ser usado no Report Print.

2. Inserindo a assinatura no Report Print

Com o Report Print aberto no editor:

  • Arraste o campo Assinatura para o local desejado no documento

  • Ele aparecerá como um placeholder dinâmico (exemplo: @Assinatura)

Neste momento, o layout ainda é básico, sem controle fino de tamanho ou alinhamento.

image.png

3. Acessando o modo Código-Fonte

Para personalizar o layout:

  • Clique no ícone Código-Fonte no menu do editor

  • O HTML completo do Report Print será exibido

image.png

É nesse ponto que conseguimos controlar exatamente como a assinatura será exibida.

4. Criando uma classe CSS para a assinatura

No início do código (ou em um local apropriado), adicione um bloco de estilo, exemplo:

<style type="text/css">.assina2{
    width: 270px;
    margin: auto;
    margin-bottom: -30px;
}
</style>
O que esse CSS faz

  • width: 270px
    Define um tamanho padrão para a assinatura, evitando que ela fique grande demais

  • margin: auto
    Centraliza a assinatura horizontalmente

  • margin-bottom: -30px
    Ajusta o espaçamento vertical, aproximando a assinatura do texto abaixo (nome, cargo, empresa etc.)

Esse valor pode (e deve) ser ajustado conforme o layout do seu documento.

5. Envolvendo o campo de assinatura com a classe CSS

Agora, localize no HTML o trecho onde o campo de assinatura aparece e envolva-o com uma div usando a classe criada:


<div class="assina2"> @Assinatura </div>

No seu caso real, o campo aparece como um label com bindings internos, algo semelhante a:



<div class="assina2"> 
  <span class="fontededados"> 
    <label class="p-name" data-variablename="Assinatura"> Assinatura </label> 
  </span> 
</div>

O importante é que todo o bloco da assinatura esteja dentro da div.assina2. como no exemplo abaixo


image.png



6. Resultado final

Com isso, você passa a ter:

  • Assinatura centralizada

  • Tamanho controlado

  • Layout consistente com documentos regulatórios

  • Flexibilidade total para ajustes finos via CSS

A partir daqui, é possível evoluir facilmente para:

  • Diferentes tamanhos de assinatura por tipo de relatório

  • Alinhamento à esquerda ou direita

  • Ajustes específicos para impressão ou PDF

Conclusão

Adicionar uma assinatura em um Report Print não exige nenhuma lógica complexa.
Com um campo de formulário bem definido e um pequeno ajuste no Código-Fonte, você ganha controle total sobre o layout e mantém o documento alinhado com exigências operacionais e regulatórias.

Esse padrão funciona muito bem para:

  • Comprovantes de investimento

  • Relatórios regulatórios

  • Termos de responsabilidade

  • Documentos com validação manual

Back to top