web-dev-qa-db-fra.com

Comment afficher uniquement certaines parties avec CSS for Print?

J'ai une page avec beaucoup de données, de tableaux et de contenu. Je veux faire une version imprimée qui n'affichera que très peu de choses sélectionnées.

Au lieu d'écrire une autre page juste pour l'impression, je lisais la fonctionnalité CSS pour "@media print".

Premièrement, quels navigateurs le prennent en charge? Comme il s'agit d'une fonctionnalité interne, ce n'est pas grave si seuls les derniers navigateurs la prennent en charge.

Je pensais à baliser quelques éléments DOM avec une classe "imprimable", et appliquer essentiellement "display: none" à tout sauf les éléments avec la classe "imprimable". Est-ce faisable?

Comment puis-je y parvenir?

EDIT: Voici ce que j'ai jusqu'à présent:

<style type="text/css">
@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}
</style>

Mais ça cache tout. Comment rendre visibles ces éléments "imprimables"?

EDIT: Essayer maintenant l'approche négative

<style type="text/css">
@media print {
    body *:not(.printable *) {display:none;}
}
</style>

Cela semble bon en théorie, mais cela ne fonctionne pas. Peut-être que "non" ne prend pas en charge les CSS avancés ...

cssprintingcss-selectors
31
Nathan H

Démarrer ici . Mais en gros, ce que vous pensez, c'est la bonne approche.

Merci, maintenant ma question est en train de devenir: comment appliquer CSS à une classe ET TOUS SES ÉLÉMENTS DESCENDANTS? Pour que je puisse appliquer "display: block" à tout ce qui se trouve dans les zones "imprimables".

Si un élément est défini sur display:none; tous ses enfants seront également masqués. Mais en tout cas. Si vous souhaitez qu'un style s'applique à tous les enfants d'autre chose, procédez comme suit:

.printable * {
   display: block;
}

Cela appliquerait le style à tous les enfants de la zone "imprimable".

13
Strelok

Je suis arrivé ici parce que j'étais curieux d'imprimer un graphique généré par chart.js. Je voulais juste imprimer le graphique directement à partir de la page (avec un bouton qui fait une 'window.print') sans tout le reste du contenu de la page.

Donc, je me suis rapproché en utilisant la technique de la réponse ici: Pourquoi ne puis-je pas remplacer la propriété d'affichage appliquée via un astérisque? .

Vous devez appliquer l '"astérisque" à l'élément "body", pas seulement par lui-même. Donc, en utilisant l'exemple CSS que l'OP (Nathan) a ajouté à la question, je l'ai changé en ceci:

<style type="text/css">
@media print {
    body * {display:none;}
    .printable, .printable > * {
    display: block !important;
  }
}
</style>

Ensuite, en ajoutant cette classe "imprimable" au graphique lui-même, comme dans

<canvas id="myChart" class="printable" width="400" height="400"></canvas>

Qui a supprimé tous les éléments de la page sur la sortie imprimée à l'exception du graphique lorsque le bouton 'Imprimer' est cliqué (via ceci):

<script>
    myChart.render();
    document.getElementById("printChart").addEventListener("click",function(){
        window.print();
    });     
</script>

Donc, cela aidera peut-être toute personne qui arrive à cette question via les googles.

4
Rick Hellewell

Une manière simple:

<style>
    .print-only{
        display: none;
    }

    @media print {
        .no-print {
            display: none;
        }

        .print-only{
            display: block;
        }
}
</style>
3
Polle

Presque tous les navigateurs le prennent en charge. Il peut être avantageux d'utiliser l'attribut media sur la balise link.

En utilisant display: none; dans certaines de vos règles serait une manière appropriée de gérer votre situation.

2
Daniel A. White

Je suggère de cacher l'élément que vous n'imprimerez pas:

HTML

<h1 class="no-print" >Welcome Just Screen</h1>
<div> I want print this section :)</div>
<div class="no-print">It's display only on screen</div>

CSS

@media print {     
    .no-print {
        display: none;
    }
}
2
pixparker

Si vous souhaitez afficher certains liens, etc. lorsque vous êtes dans le navigateur, vous ne voulez pas les imprimer. De plus, vous avez des logos et des en-têtes qui ne devraient figurer que sur la page imprimée. Cela semble bien fonctionner:

Exemple:

CSS:

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

HTML:

<div class="noPrint" id="this_is_not_printed"  >
   <a href=links.html>
</div>
<div class="onlyPrint"  id="this_is_only_seen_on_printer" >
   <img scr=logo.png >
   <img scr=letterhead.png >
</div>
2
oleviolin