1

Estou desenvolvendo um sistema WEB
e na hora de imprimir a tela preciso colocar no final de cada página uma imagem, isso é possível?

Até agora tenho o seguinte código:

.hide{
      display: none;
 }
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<!-- ISSO È criado dinamicamente com PHP  entao imagine um for -->

<!-- inicio do for -->
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<!-- fim do for -->



<!-- tenho essa div -->
<div>
  <img src='https://www.codigofonte.com.br/wp-content/uploads/2013/10/url.jpg' width="200" />
<div>


</body>
</html>

Neste exemplo tenho uma div com a imagem que quero imprimir no rodapé de todas as páginas independente do numero de paginas criadas.

Vale lembrar que o conteúdo é gerado dinamicamente através de um FOR

2
  • Relacionada aqui Commented 23/02/2018 às 15:05
  • valeu, mas o media eu conheço o problema é botar essa div no final de cada página rsr @JorgeMatheus Commented 23/02/2018 às 15:16

1 Resposta 1

5

Você pode utilizar a @media print para isso.

Traduzindo o texto (Google Translate) temos isso:

Destinado ao material paginado e aos documentos vistos na tela no modo de visualização impressa.

Em resumo, será aplicado no momento de visualização para impressão.

Para o seu exemplo em específico, vamos utilizar também a Paged media e outras Medias Types.

Basicamente, começaremos com o footer com o display:none. Assim ele não irá aparecer na visualização normal da página.

footer {
  display: none;
}

No momento da impressão, alteraremos para display:block e podemos definir outros estilos, caso desejar.

 footer {
    position: fixed;
    bottom: 0;
    display: block;
  }

Utilizaremos também a propriedade page-break-inside para termos uma quebra de página.

No exemplo abaixo eu adicionei outras propriedades, mas é apenas para melhor ajustar ao exemplo.

footer {
  display: none;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
    display: block;
  }
  p {
    page-break-inside: avoid;
  }
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
}
<button onclick="window.print()">Imprimir</button>
<h1>
  Conteúdo
</h1>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent.
</p>

<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>



<footer>
  <img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</footer>

Como resultado, teremos a logo da Google no footer de todas as páginas

Caso queira ler mais sobre o assunto, esta pergunta no SOen possui diversas respostas explicando como obter o mesmo resultado.

1
  • 1
    :D muito bom!!!
    – Syzoth
    Commented 23/02/2018 às 16:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .