打印同 css 的網站的特定區域

任何時候都需要打印該網站的特定區域? 所以, 如何界定此打印區域? css 係解決方案!

個問題

Cenário: 在屏幕上冇任何站點, 和它的中間右一種報告 (表列嘅數據). Como imprimir apenas a área que eu tinha interesse?

解決方案

Como sabemos, @media 打印 é 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 打印” ocultando 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>
<>
  <title>Not Print</title>
  <style type="text/css">
      @媒體 print { 
          .notprint { visibility:hidden; } 
      }
  </樣式>
</>
<身體>
  <strong>Isto vai ser impresso!</strong>
  <div class="notprint">
      Já isto, não será impresso!
  </div> 
  Aqui também será impresso!             
</身體>
</HTML>

Yes Print

2° CasoIncluir uma única área na impressão, e excluir demais
Mas e quando for o contrário, IE, 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 打印, 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>
<>
  <title>Yes Print</title>
  <style type="text/css">
    @媒體 print {
      * {
        visibility:hidden;
      }
 
      #yesprint {
        visibility:visible;
        position: absolute;
        top:0;
        left:0;                                     
      }                                  
    }
  </樣式>
</>
<身體>
  <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!            
</身體>
</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, 火狐瀏覽器 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“, 如圖所示. Nesta mesma janela, é possível fazer outros ajustes de impressão.

Veja também: 使 div 唔可見打印 | CSS 打印.

就係噉啦… use por sua conta e risco!

總點擊數: 14125

4 評論 “打印同 css 的網站的特定區域

  1. Luan da Costa 說::

    Muito obrigado pela ajuda cara, porém ao tentar imprimir a minha div não está carregando o css,já inclusive criei o css para impressao . Tem alguma dica?

    • Copie o código exatamente como está no exemplo do Post para seu servidor e teste para ver se funciona. Tente também colocar o CSS embutido direto na página (e não fazendo chamada externa), só para fins de testes. Às vezes, se você estiver usando código de CSS de terceiros (como plugins), pode ser que alguma Tag esteja definida como important!. Use o Firefox com o Firebug e procure identificar corretamente as classes ou ids CSS que você está querendo modificar. Use o ponteiro do Firebug para isto! E por aí vai

留言

您的電子郵件地址就不會發佈. 與標記必填的字段 *