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

Question

J'ai un lien sur ma page web pour imprimer la page web mais le lien est également visible dans l'impression.

Veuillez donc me donner le code javascript ou HTML permettant de masquer le bouton de lien lorsque je clique sur le lien d'impression.

Exemple :
"Bonsoir"

                       Print (click Here To Print)

Je veux cacher cette étiquette "Print" lorsqu'elle imprime le texte "Good Evening". Après l'impression de la page, cette étiquette "Print" n'apparaîtra plus sur l'impression.

Answer 1

Dans votre feuille de style, ajoutez :

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

Puis ajoutez 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. J'ai réussi à le faire fonctionner avec 'noPrint' au lieu de 'noprint' (en minuscules).

Answer 2

La meilleure pratique consiste à utiliser une feuille de style spécifique à l'impression et de le mettre media de l'attribut print .

Dans celui-ci, affichez / cachez les éléments que vous souhaitez voir imprimés sur le papier.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Answer 3

Vous pourriez placer le lien à l'intérieur d'un div, puis utiliser JavaScript sur la balise A 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, c'est qu'une fois cliqué, le bouton disparaît et les utilisateurs perdent cette option sur la page (il y a toujours Ctrl+P).

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 de l'option d'impression (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.

Answer 4

La meilleure chose à faire est de créer une version de la page "à imprimer uniquement".

Oh, attendez... on n'est plus en 1999. Utilisez une impression CSS avec "display : none".