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.

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.

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

É 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>

• 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:

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