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

440

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 masquerait le bouton de lien lorsque je clique sur le lien d'impression?

Exemple:

 "Good Evening"
 Print (click Here To Print)

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

css printing sourav
la source

Réponses:

743

Dans votre feuille de style, ajoutez:

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

Ensuite, ajoutez class='no-print'(ou ajoutez la classe no-print à une instruction de classe existante) dans votre code HTML que vous ne souhaitez pas apparaître dans la version imprimée, comme votre bouton.

Diodeus - James MacFarlane
la source
17
Cette réponse n'est pas complète. Vous devez avoir deux sections médias. @mediaimpression et @mediasérigraphie. Dans la section d'impression, vous placez vos styles pour l'impression. Dans la section écran d'écran, vous placez vos styles pour la sérigraphie. Vous pouvez même avoir plusieurs sections d'écran pour différentes résolutions. Fondamentalement, si vous ajoutez simplement ce qui est donné dans cette réponse, cela ne fonctionnera pas. Croyez-moi, j'ai essayé. Alors, comment cela a-t-il obtenu 69 votes positifs?
Codeguy007
6
en fait, cela fonctionne si vous utilisez simplement le code donné. je viens d'essayer dans firefox. donc, au moins dans les navigateurs modernes, c'est la solution.
luschn
8
J'ai essayé de cacher un <div> avec plusieurs sous-éléments à l'intérieur. Le problème était que certains éléments étaient encore visibles sur l'impression. La solution était d'utiliser ce css:@media print { .no-print, .no-print * { display: none !important; } }
Philipp
6
Cela peut ou non fonctionner selon le support spécifié. Par exemple, pour combiner à la fois les styles d'écran et d'impression dans une feuille de style, puis utilisez les requêtes de média dans cette feuille de style, comme cette réponse le suggère, vous devez spécifier les types de média "écran" et "impression":<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Clint Pachl
5
@ Codeguy007: Je ne comprends pas votre point. Vous n'avez besoin que @media screensi vous souhaitez définir des styles d'écran uniquement, mais ce n'est pas le cas ici: par défaut, tous les éléments sont affichés, et en définissant un style d'impression uniquement qui masque l'élément est parfaitement suffisant pour le faire apparaître à l'écran .
chiccodoro
173

Bootstrap 3 a sa propre classe appelée:

hidden-print

Il est défini comme ceci:

@media print {
  .hidden-print {
    display: none !important;
  }
}

Vous n'avez pas à le définir vous-même.

Dans Bootstrap 4, cela a changé en:

.d-print-none
Bijan
la source
Excellente solution Bootstrap 4. Fonctionne comme un charme.
Diego Victor de Jesus
Je n'arrive pas à croire comment j'ai raté la solution bootstrap jusqu'à présent .. Merci!
ReturnTable
! importantm'a sauvé.
Evan Hu
169

La meilleure pratique consiste à utiliser une feuille de style spécifiquement pour l'impression et à définir son mediaattribut sur print.

Dans ce document, affichez / masquez les éléments que vous souhaitez imprimer sur papier.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Andreas Grech
la source
9
Ici, vous devriez également avoir css pour ne pas afficher d'autre contenu de wrapper, changer la famille de polices pour une meilleure valeur, supprimer les largeurs pour permettre une utilisation complète de la page. Si vous définissez votre feuille de style principale sur media = "screen", vous pouvez traiter votre feuille de style d'impression comme un nouveau terrain de jeu.
Steve Perks
2
Absolument. Et avec cette approche, vous pouvez soit simplement supprimer "Cliquez ici pour la version imprimable" ou ajouter "Cette page est imprimable" ou similaire. Comme l'a dit Steve Perks, la bonne pratique consiste à supprimer tout le contenu indésirable comme la navigation, les publicités, etc. N'incluez que le contenu principal de la page.
Arve Systad
39

Voici une solution simple mettre ce CSS 

@media print{
   .noprint{
       display:none;
   }
}

et voici le HTML

<div class="noprint">
    element that need to be hidden when printing
</div>
<div class="noprint">
    element that need to be hidden when printing
</div>
Nesar Nori
la source
3
Une classe serait un meilleur choix qu'un identifiant ici, pour la simple raison que si vous utilisez un identifiant, vous ne pouvez appliquer cette règle qu'à une seule chose par page. Une classe vous permettrait de l'appliquer là où vous en avez besoin.
Nick F
12

FICHIER CSS 

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

EN-TÊTE HTML

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ÉLÉMENT

<div class="no-print"></div>
user3806549
la source
10

Vous pouvez placer le lien dans un div, puis utiliser JavaScript sur la balise d'ancrage pour masquer le div lorsque vous cliquez dessus. Exemple (non testé, peut avoir besoin d'être modifié mais vous avez 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 ils perdent 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 dans cette feuille de style de spécifier le statut caché de l' printOptionID (ou peu importe comment vous l'appelez). Vous pouvez le faire dans la section head du HTML et spécifier une deuxième feuille de style avec un attribut media.

Justin Scott
la source
6

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

Oh, attends ... ce n'est plus 1999. Utilisez un CSS d'impression avec "display: none".

Jay R
la source
1
il y a encore de la valeur dans les versions imprimables car cela montre clairement à l'utilisateur ce qu'il obtiendra lors de l'impression, ce qui peut être abusé avec les techniques CSS
annakata
1
ajouté à cela, vous pouvez inclure du contenu supplémentaire sur une version imprimée comme des références de liens, des pieds de page, etc. Dans les jours à venir, une grande partie de cela sera également réalisable via css.
Steve Perks
8
@annakata: L'utilisateur peut déjà obtenir cela en utilisant "Aperçu avant impression" sur son navigateur. En bonus, c'est en fait à cela qu'il sert.
récursif
5 

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>
Développer l'extrait

Mike Rapadas
la source
3

La réponse acceptée par diodus ne fonctionne pas pour certains, sinon pour nous tous. Je ne pouvais toujours pas cacher mon bouton Imprimer ce papier sur le papier.

Le petit ajustement par Clint Pachl d'appeler le fichier CSS en ajoutant

      media="screen, print"

et pas seulement

      media="screen"

résout ce problème. Donc, pour plus de clarté et parce qu'il n'est pas facile de voir l'aide supplémentaire cachée de Clint Pachl dans les commentaires. L'utilisateur doit inclure le ", imprimer" dans le fichier css avec le formatage souhaité.

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

et non pas le média par défaut = "écran" uniquement.

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

Je pense que cela résout ce problème pour tout le monde.

toiles
la source