Imprimer une zone spécifique du site avec CSS

Besoin d’imprimer uniquement une zone spécifique du site? Alors, Façon de délimiter cette zone d’impression? CSS est la solution!

Problème

Scénario de: A il n’importe quel site sur l’écran, et à droite au milieu de celui-ci une sorte de rapport (données tabulées). Comment imprimer uniquement la zone je m’intéressais?

Solution

Comment savons-nous, @media print est une fonctionnalité CSS qui permet de contrôler le style de ce qui sera imprimé. Nous allons analyser deux situations.

“Ne pas s’imprimer”

1Cas – Imprimer tous les, mais supprimer une ou plusieurs zones d’impression
Quand vous avez une zone que vous souhaitez supprimer l’impression est facile, Il suffit de créer 1 1 classe dans “@media print” masquer la visibilité et l’assigner à l’élément (balise HTML) vous ne voulez pas imprimer. Dans le cas ci-dessous, Il a été créé la classe .notprint et affectés à un DIV qui ne doit pas être imprimé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<HTML>
<tête>
  <titre>Ne pas s’imprimer</titre>
  <type de style="text/css">
      @médias imprimer { 
          .notprint { visibilité:caché; } 
      }
  </style>
</tête>
<corps>
  <forte>Cela sera imprimé!</forte>
  <div Classe="notprint">
      Ceci, ne sera pas imprimé!
  </div> 
  Ici aussi s’imprimera!             
</corps>
</HTML>

“Oui Print”

2Cas – Inclure un seul dans la zone d’impression, et supprimer l’autre
Mais quand le contraire, ie, Que se passe-t-il si je veux imprimer seulement une zone spécifique, comme un DIV, par exemple, et ne veulent pas le reste du site apparaissent dans la presse. C’est la raison de ce Post! Bien sûr, aussi, nous allons utiliser le @media print, Il suffit de penser différemment. Dans ce cas, dissimulé la visibilité de l’ensemble (*) les éléments du site et, puis, donner une visibilité uniquement à l’élément que nous voulons imprimer, dûment désigné par un ID que j’ai appelé #yesprint. Comme ça, Nous pouvons, par exemple, imprimer uniquement le contenu d’un DIV spécifique.

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>
<tête>
  <titre>Oui Print</titre>
  <type de style="text/css">
    @médias imprimer {
      * {
        visibilité:caché;
      }
 
      #yesprint {
        visibilité:visible;
        position: absolu;
        Retour au début:0;
        gauche:0;                                     
      }                                  
    }
  </style>
</tête>
<corps>
  <forte>Cela ne sera pas imprimé!</forte>  
  <id de la div="yesprint">
      Ceci et, juste ce, seront imprimés!
  </div> 
  Ici aussi ne pas sortir dans la presse!            
</corps>
</HTML>

Dans le cas contraire l’effet désiré, C’est peut-être dû à votre modèle de recevoir style résiduelle de certains CSS ci-dessus (père). Essayez d’utiliser !important ou adapter le code pour forcer le résultat attendu. Voir aussi s’il y a lieu balise cassé, sans l’ouverture ou la fermeture.

J’ai testé cette solution dans Internet Explorer 9, Firefox 14.0.1 et Chrome 21.0.1180.8. Tout semble fonctionner correctement… N’oubliez pas de trop, Que se passe-t-il si vous souhaitez imprimer les couleurs et images d’arrière-plan, Cela doit être configuré directement sur chaque navigateur. Par exemple, dans Internet Explorer, allez dans le menu Fichier > page Configuration et activer l’option “Impression couleurs et images d’arrière-plan“, comme indiqué ci-dessous. Dans cette même fenêtre, Vous pouvez faire d’autres paramètres d’impression.

Voir aussi: Faire DIV invisible pour imprimer | CSS pour imprimer.

Qui… utiliser à vos risques et périls!

Totales hits: 14080

4 Commentaires sur “Imprimer une zone spécifique du site avec CSS

  1. Luan da Costa a dit:

    Je vous remercie beaucoup pour votre aide l’homme, mais quand j’essaie d’imprimer mes div ne charge pas le css,J’ai même créé css imprimable . Avez des conseils?

    • Copiez le code exactement comme il apparaît dans l’exemple de la poste à votre serveur et tester pour voir si cela fonctionne. Essayez de mettre aussi le CSS incorporé directement dans la page (et aucun appel externe), juste pour l’essai. Parfois, Si vous utilisez le code CSS tiers (comme plugins), une balise est définie aussi important!. Utiliser Firefox avec Firebug et tenter d’identifier correctement l’ID CSS ou les classes que vous souhaitez modifier. Pour ce faire utiliser le pointeur de Firebug! Et ainsi de suite…

Laisser une réponse

Votre adresse email ne sera pas publié. Les champs obligatoires sont marqués avec *