Stampare l'area specifica del sito con i CSS

Mai bisogno di stampare solo un'area specifica del sito? Allora, Come delimitare questa area di stampa? CSS è la soluzione!

Problema

Scenario: C'era alcun sito sullo schermo, e proprio nel bel mezzo di una sorta di relazione (dati tabulati). Come stampare solo l'area che mi interessava?

Soluzione

Come facciamo a sapere, @media stampa è una funzionalità CSS che permette di controllare lo stile di ciò che verrà stampato. Analizziamo due situazioni.

“Non stampare”

1Caso – Stampa tutti i, ma eliminare una o più aree di stampa
Quando si dispone di un'area che si desidera eliminare la stampa è facile, semplicemente creare 1 1 classe a “@media stampa” oscurando la visibilità e assegnarlo all'elemento (tag HTML) non si desidera stampare. Nel caso di seguito, È stata creata la classe .notprint e assegnato ad un DIV che non deve essere stampato.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<HTML>
<testa>
  <titolo>Non stampare</titolo>
  <tipo di stile="text/css">
      @Media stampa { 
          .notprint { visibilità:nascosta; } 
      }
  </stile>
</testa>
<corpo>
  <forte>Tale descrizione verrà stampata!</forte>
  <div classe="notprint">
      Questo, non verrà stampato!
  </div> 
  Qui sarà anche stampato!             
</corpo>
</HTML>

“Sì stampa”

2Caso – Includere un singolo nell'area stampa, ed eliminare altro
Ma quando l'opposto, IE, Cosa succede se si desidera stampare solo una determinata area, come un DIV, Per esempio, e non si desidera che il resto del sito apparire in stampa. Questo è il motivo di questo Post! Naturalmente,, Inoltre useremo il @media stampa, solo pensando in modo diverso. In questo caso, la visibilità di tutti a scomparsa (*) gli elementi del sito e, quindi, dare visibilità solo all'elemento che vogliamo stampare, debitamente indicato da un ID che ho chiamato #yesprint. Così, Possiamo, Per esempio, stampare solo il contenuto di un DIV specifico.

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>
<testa>
  <titolo>Sì stampa</titolo>
  <tipo di stile="text/css">
    @Media stampa {
      * {
        visibilità:nascosta;
      }
 
      #yesprint {
        visibilità:visibile;
        posizione: assoluta;
        In alto:0;
        sinistra:0;                                     
      }                                  
    }
  </stile>
</testa>
<corpo>
  <forte>Questo non verrà stampato!</forte>  
  <div id="yesprint">
      Questo e, solo questo, verrà stampato!
  </div> 
  Qui inoltre non esce in stampa!            
</corpo>
</HTML>

Se non l'effetto desiderato, Forse è a causa di modello di essere sempre stile residuo di alcuni CSS sopra (padre). Provare a utilizzare !importante o modificare il codice per forzare il risultato previsto. Vedi anche se c'è qualche Prodotto Tag rotto, senza apertura o chiusura.

Ho provato questa soluzione in Internet Explorer 9, Firefox 14.0.1 e cromo 21.0.1180.8. Tutto sembrava funzionare correttamente… Ricorda troppo, Cosa succede se si desidera stampare colori e immagini di sfondo, Questo deve essere configurato direttamente su ogni browser. Per esempio, in Internet Explorer, Vai al menu file > Imposta pagina e attivare l'opzione “Stampa colori e immagini di sfondo“, come illustrato di seguito. In questa stessa finestra, È possibile effettuare altre impostazioni di stampa.

Vedi anche: Rendendo il DIV invisibile per stampare | CSS per la stampa.

Questo è tutto… utilizzare a proprio rischio!

Visite totali: 14082

4 Commenti su “Stampare l'area specifica del sito con i CSS

  1. Luan da Costa ha detto:

    La ringrazio molto per il tuo uomo di aiuto, ma quando tentando di stampare mio div non viene caricata la css,Ho anche creato css stampabile . Ha qualche consiglio?

    • Copiare il codice esattamente come appare nell'esempio del Post sul server e test per vedere se funziona. Prova a mettere anche il CSS incorporato direttamente nella pagina (e nessuna chiamata esterna), solo per scopi di test. A volte, Se si utilizza codice CSS di terze parti (come plugin), alcuni Tag è definito come importante!. Usare Firefox con Firebug e tenta di identificare correttamente i CSS ID o le classi che si desidera modificare. Utilizzare il puntatore di Firebug per questo! E così via…

Lasciare una risposta

L'indirizzo email non verrà pubblicato. Campi obbligatori sono contrassegnati con *