Comment afficher uniquement certaines parties avec CSS for Print?
J'ai une page avec beaucoup de données, les tables et le contenu.
Je veux faire une version imprimée, qui n'affichent que très peu de sélectionné choses.
Au lieu d'écrire une autre page pour l'impression, je lisais à propos de la CSS est la caractéristique de "@media print".
Tout d'abord, quels sont les navigateurs supportant? Puisque c'est une fonction interne, c'est OK si seulement les navigateurs les plus récents en charge.
Je pensais de marquage quelques éléments du DOM avec un "imprimable" de la classe, et fondamentalement appliquer "display:none" à tout à l'exception de ces éléments avec le "imprimable" de la classe.
C'est que c'est faisable?
Comment puis-je y parvenir?
EDIT:
C'est ce que j'ai à ce jour:
<style type="text/css">
@media print {
* {display:none;}
.printable, .printable > * {display:block;}
}
</style>
Mais il se cache tout. Comment puis-je faire de ces "imprimable" éléments visibles?
EDIT:
Essayez maintenant de l'approche négative
<style type="text/css">
@media print {
body *:not(.printable *) {display:none;}
}
</style>
Cela semble bon en théorie, mais il ne fonctionne pas. Peut-être "pas" n'est pas prise en charge avancée des css ...
source d'informationauteur Nathan H
Vous devez vous connecter pour publier un commentaire.
Commencer ici. Mais, fondamentalement, ce que vous pensez est la bonne approche.
Si un élément est défini à
display:none;
tous ses enfants seront cachés. Mais dans tous les cas. Si vous voulez un style à appliquer à tous les enfants de quelque chose d'autre, vous effectuez les opérations suivantes:Qui serait d'appliquer le style à tous les enfants de la "imprimable" de la zone.
Presque tous les navigateurs prennent en charge. Il peut être avantageux d'utiliser le
media
attribut sur lalink
tag.À l'aide de
display: none;
dans certains de vos règles serait une bonne façon de gérer votre situation.Une manière simple:
Je suis ici parce que j'étais curieux de connaître l'impression d'un graphique généré par chart.js. Je voulais juste imprimer le graphique directement à partir de la page (avec un bouton qui ne une " fenêtre.imprimer) sans tous les autres contenus de la page.
Donc, je me suis approchée en utilisant la technique de la réponse ici: Pourquoi ne puis-je remplacer la propriété d'affichage appliquée par un astérisque? .
Vous devez appliquer le 'asterisk' pour le 'corps' de l'élément, et pas seulement par lui-même. Donc, en utilisant l'exemple de CSS que l'OP (Nathan) est ajoutée à la question, je l'ai changé pour cette:
Puis d'ajouter que "imprimable" classe le tableau lui-même, comme dans
Qui a supprimé tous les éléments de la page sur la sortie imprimée à l'exception du diagramme lorsque le bouton "imprimer" est cliqué (via):
Donc, peut-être cela aidera toute personne qui arrive à cette question via les google.
Je suggère à masquer l'élément que vous n'aurez pas l'impression
Html
Css