Comment masquer un élément lors de l'impression d'une page web ?

Question

Détails

Source Version non AMP Editer

Comment masquer un élément lors de l'impression d'une page web ?

J'ai un lien sur ma page web pour imprimer la page web. Cependant, le lien est également visible dans l'impression elle-même.

Existe-t-il un code javascript ou HTML qui permettrait de masquer le bouton de lien lorsque je clique sur le lien d'impression ?

Exemple :

 "Good Evening"
 Print (click Here To Print)

Je veux masquer cette étiquette "Imprimer" lorsqu'elle imprime le texte "Bonsoir". L'étiquette "Imprimer" ne doit pas apparaître sur l'impression elle-même.

TRiG

Question modifiée 14 octobre 2015 в 11:14

Programmation

printing css

10 décembre 2008 в 7:11

13 vues

Diodeus - James MacFarlane · Answer 1 · 2008-12-10T14:02:10+00:00

Diodeus - James MacFarlane

Source Version non AMP Editer

Dans votre feuille de style, ajoutez :

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Ajoutez ensuite class='no-print' (ou ajoutez la classe no-print à une déclaration de classe existante) dans votre HTML que vous ne voulez pas voir apparaître dans la version imprimée, comme votre bouton.

The Guy with The Hat

Réponse modifiée 4 décembre 2018 в 3:22

704

0

Commentaires (8)

Andreas Grech · Answer 2 · 2008-12-10T07:23:38+00:00

Andreas Grech

Source Version non AMP Editer

La meilleure pratique consiste à utiliser une feuille de style spécifique à l'impression, et à définir son attribut media sur print.

Dans celle-ci, affichez/masquez les éléments que vous souhaitez voir imprimés sur papier.

rudolph1024

Réponse modifiée 17 juillet 2015 в 8:55

167

0

Commentaires (2)

Justin Scott · Answer 3 · 2008-12-10T07:20:15+00:00

Vous pourriez placer le lien à l'intérieur d'un div, puis utiliser JavaScript sur la balise d'ancrage pour masquer le div lorsqu'on clique dessus. Exemple (non testé, peut nécessiter des modifications, mais vous avez compris l'idée) :

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

L'inconvénient est qu'une fois cliqué, le bouton disparaît et le visiteur perd cette option sur la page (il y a toujours Ctrl+P cependant).

La meilleure solution serait de créer une feuille de style d'impression et de spécifier dans cette feuille de style le statut caché de l'ID printOption (ou quel que soit le nom que vous lui donnez). Vous pouvez le faire dans la section head du HTML et spécifier une deuxième feuille de style avec un attribut media.