Imprimir área específica do site com CSS

Já precisou imprimir somente uma área específica do site? பின்னர், como delimitar esta área de impressão? CSS é a solução!

பிரச்சனை

Cenário: Estava lá todo o site na tela, e bem no meio dele uma espécie de relatório (dados tabulados). Como imprimir apenas a área que eu tinha interesse?

தீர்வு

Como sabemos, @media print é um recurso CSS que nos permite controlar o estilo do que será impresso. Vamos analisar duas situações.

Not Print

1° CasoImprimir tudo, mas excluir uma ou mais áreas da impressão
Quando você tem uma área que deseja excluir da impressão é fácil, basta criar uma uma class dentro de@media printocultando a visibilidade e atribuí-la ao elemento (tag html) que você não quer imprimir. No caso abaixo, foi criado a classe .notprint e atribuída a uma DIV que não deve ser impressa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<HTML>
<தலை>
  <தலைப்பு>Not Print</தலைப்பு>
  <style type="text/css">
      @media print { 
          .notprint { visibility:hidden; } 
      }
  </பாணி>
</தலை>
<body>
  <strong>Isto vai ser impresso!</strong>
  <div வர்க்கம்="notprint">
      Já isto, não será impresso!
  </div> 
  Aqui também será impresso!             
</body>
</HTML>

Yes Print

2° CasoIncluir uma única área na impressão, e excluir demais
Mas e quando for o contrário, வேறு வார்த்தைகளில் கூறுவதானால், e se eu quiser imprimir apenas uma área específica, como uma DIV, உதாரணமாக, e não quiser que o restante do site apareça na impressão. Eis o motivo deste Post! தெளிவான, também usaremos o @media print, só que raciocinando de forma diferente. இந்த வழக்கில், ocultamos a visibilidade de todos (*) os elementos do site e, em seguida, damos visibilidade apenas ao elemento que queremos imprimir, devidamente designado por um ID que chamei de #yesprint. Assim, podemos, உதாரணமாக, imprimir apenas conteúdo de uma DIV específica.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<HTML>
<தலை>
  <தலைப்பு>Yes Print</தலைப்பு>
  <style type="text/css">
    @media print {
      * {
        visibility:hidden;
      }
 
      #yesprint {
        visibility:visible;
        position: absolute;
        top:0;
        left:0;                                     
      }                                  
    }
  </பாணி>
</தலை>
<body>
  <strong>Isto não vai ser impresso!</strong>  
  <div id="yesprint">
      Já isto e, apenas isto, será impresso!
  </div> 
  Aqui também não vai sair na impressão!            
</body>
</HTML>

Caso não ocorra o efeito desejado, possivelmente seja devido a sua template estar pegando estilo residual de algum CSS acima (pai). Tente usar !important ou ajustar o código para forçar o resultado esperado. Veja também se não há alguma tag quebrada, sem abrir ou fechar.

Testei esta solução no Internet Explorer 9, Firefox 14.0.1 e Chrome 21.0.1180.8. Todos pareceram funcionar corretamenteLembro também, que caso queira imprimir cores e imagens do plano de fundo, isto deve ser configurado diretamente em cada navegador. உதாரணமாக, no Internet Explorer, vá no menu Arquivo > Configurar Página e habilite a opçãoImprimir cores e imagens do plano de fundo“, conforme figura abaixo. Nesta mesma janela, é possível fazer outros ajustes de impressão.

Veja também: Tornar DIV invisível ao imprimir | CSS diferenciado para impressão.

என்று… use por sua conta e risco!

மொத்த அணுகுகிறது: 14125

4 விமர்சனங்களை “Imprimir área específica do site com CSS

ஒரு பதில் விடவும்

உங்கள் மின்னஞ்சல் முகவரியை வெளியிடப்பட்ட முடியாது. தேவையான புலங்கள் குறிக்கப்பட்ட *