Tutoriais

Como Adicionar Números de Página, Datas e Títulos ao seu PDF

Como Adicionar Números de Página, Datas e Títulos ao seu PDF

Se você está salvando uma receita, uma simples captura de tela serve.

Mas se você está salvando uma página da web como evidência legal, pesquisa acadêmica ou registros comerciais, uma simples imagem não é suficiente. Você precisa de contexto. Você precisa saber exatamente quando a página foi salva, de onde ela veio e os números das páginas para fácil referência.

Nossa ferramenta possui um mecanismo profissional de "Cabeçalho e Rodapé" integrado. Ele permite injetar essas informações automaticamente em cada página do seu PDF.

Veja como usá-lo, incluindo alguns modelos de copiar e colar que você pode usar agora mesmo.

Como Funciona

Na seção "Configurações Avançadas" (Advanced Settings) da nossa ferramenta, você encontrará duas caixas de texto:

  1. Header HTML (Aparece no topo de cada página)
  2. Footer HTML (Aparece na parte inferior de cada página)

header & footer templates

Você pode escrever HTML padrão aqui, mas a verdadeira mágica vem do uso de nossas Classes CSS Especiais. Se você usar esses nomes de classe específicos, nosso conversor os preencherá automaticamente com os dados corretos:

  • <span class='date'></span> → Insere a data de impressão atual.
  • <span class='title'></span> → Insere o título da página da web.
  • <span class='url'></span> → Insere a URL de origem.
  • <span class='pageNumber'></span> → Insere o número da página atual.
  • <span class='totalPages'></span> → Insere o número total de páginas.

3 Modelos para Copiar e Colar

Escrevemos estes modelos usando CSS inline robusto (style="...") para que funcionem perfeitamente no mecanismo de PDF sem a necessidade de folhas de estilo externas.

1. O "Número de Página Simples" (Rodapé)

Este é o clássico. Ele coloca um número de página pequeno e centralizado na parte inferior de cada página.

Cole isto em "Footer HTML":

<div style="font-size: 10px; text-align: center; width: 100%; padding-top: 5px;">
  Página <span class="pageNumber"></span> de <span class="totalPages"></span>
</div>

2. O Rodapé de "Arquivo" (Legal/Pesquisa)

Perfeito para capturar evidências. Ele lista a URL de origem à esquerda e a data em que foi salvo à direita.

Cole isto em "Footer HTML":

<div style="font-size: 8px; width: 100%; border-top: 1px solid #ccc; padding-top: 5px; overflow: hidden;">
  <span style="float: left; max-width: 70%;">Fonte: <span class="url"></span></span>
  <span style="float: right;">Salvo em: <span class="date"></span></span>
</div>

3. O Cabeçalho de "Relatório Profissional"

Faz com que sua captura da web pareça um documento oficial. Ele coloca o Título em negrito à esquerda e a Data à direita.

Cole isto em "Header HTML":

<div style="font-size: 10px; width: 100%; margin-bottom: 10px; overflow: hidden;">
  <span style="float: left; font-weight: bold; max-width: 75%;" class="title"></span>
  <span style="float: right;" class="date"></span>
</div>

Dicas Importantes

  1. ⚠️ Você DEVE Definir Margens: Cabeçalhos e Rodapés são impressos dentro das margens da página. Se suas margens estiverem definidas como "0", seu cabeçalho ficará invisível! Você deve definir as margens Superior e Inferior em pelo menos 0.4in (ou 10mm) para que esses modelos apareçam.
  2. Tamanho da Fonte: O mecanismo de PDF trata os tamanhos de fonte de maneira diferente de uma tela. Recomendamos usar de 8px a 10px. Qualquer coisa menor pode desaparecer.

Pronto para subir de nível? Dominar cabeçalhos é apenas um passo. Para mais dicas sobre como criar documentos profissionais, confira O Guia Definitivo para Criar o PDF de Página Web Perfeito.

Artigos Relacionados