Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Ao imprimir um html, como faço para imprimir o <header> em todas as páginas?

Sou novo no desenvolvimento front-end. Fiz um relatório usando o CSS abaixo e me atendeu muito bem, gera um orçamento com os dados numa tabela. Só que ao imprimir um orçamento muito grande, as páginas após a primeira só ficam com os dados na grid. Pensei então em deixar o cabeçalho da grid junto dentro das tags

e imprimir o cabeçalho em todas as páginas. Pesquisei e vi que tem como colocar no css @media print e tentei usas coisas como: @media print{ header { position = fixed; display = blocked; } }

Mas colocando isso, a primeira página fica normal, as acho que é por conta da construção da página. A partir da segunda página, o header é replicado, mas os dados do

são impressos por cima do header... Alguém sabe como fazer? Na hora de imprimir fazer sair o header em todas as páginas e o main ficar certinho, logo após o header e o footer sair só na última página?
7 respostas

Oi João, tudo bem?

Usando de base as suas informações, posso dar umas dicas pra imprimir o <header> em todas as páginas, você pode usar a propriedade CSS position: fixed para fixar o elemento no topo da página. No entanto, é importante lembrar que o conteúdo do <main> pode ficar por cima do <header> se não houver um espaçamento adequado.

Uma solução seria adicionar um padding-top ao <main> para garantir que o conteúdo não fique por cima do <header>. Por exemplo:

@media print {
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  main {
    padding-top: 100px; /* ajuste o valor conforme necessário */
  }
}

Dessa forma, o <header> ficará fixo no topo de todas as páginas impressas e o <main> terá um espaçamento adequado para não sobrepor o <header>.

Essa é dica que posso te dar de acordo com as informações que você passou.

Parabéns por praticar com esse projeto!

Um abraço e bons estudos.

Olá, Lorena! Tudo bem, e contigo? Primeiramente, muito obrigado pelo suporte. Deu certo só na primeira página, nas outras encavalou. Imagem da impressão do relatório

Olá, boa tarde! Alguém sabe como resolver para o cabeçalho ser impresso em todas as páginas e a tag main, como os dados, ficar logo abaixo?

Manda o código todo que tu tá usando, print que como está num ajuda muito!

Segue link para baixar o código, não dá para colocar aqui por conta da limitação de caracteres: https://drive.google.com/file/d/1yCjMCF8jlWut_AiZiLl-dT0d9HnM-AFc/view?usp=sharing

solução!

Dá uma olhada nesse vídeo, tem exatamente o que você quer https://www.youtube.com/watch?v=gwH6vLzmGWg

Eu já tinha visto esse vídeo e achei a solução muito 'macarrônica', uma gambiarra para funcionar. Acredito que deva ter algo a ser feito dentro do seletor media print que resolva o problema da maneira correta, profissional. Vou continuar pesquisando e, quando resolver, posto aqui.

Valeu pela ajuda!