web-dev-qa-db-fra.com

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 sur l’imprimé lui-même.

Existe-t-il un code javascript ou HTML qui cacherait le bouton du 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.

cssprinting
400
sourav

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 instruction de classe existante) dans votre code HTML que vous ne souhaitez pas afficher dans la version imprimée, telle que votre bouton.

693
Diodeus - James MacFarlane

La meilleure pratique consiste à tilisez une feuille de style spécialement pour l'impression et définissez son attribut media sur print.

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

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

Bootstrap 3 a sa classe propre pour cela appelée:

hidden-print

Il est défini comme ceci:

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

Vous n'êtes pas obligé de le définir vous-même.

Dans Bootstrap 4 cela a changé en:

.d-print-none
156
Bijan

Voici une solution simple mettre ce CSS

<style>
@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>
33
Nesar Nori

FICHIER CSS

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


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

HTML HEADER

<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>
12
user3806549

Vous pouvez placer le lien dans une div, puis utiliser JavaScript sur la balise d'ancrage pour masquer la div lorsque vous cliquez dessus. Exemple (non testé, vous devrez peut-être être modifié, mais vous en aurez 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 de spécifier dans cette feuille le statut masqué de l'ID printOption (ou peu importe comment vous l'appelez). Vous pouvez le faire dans la section head du HTML et spécifier une seconde feuille de style avec un attribut de média.

10
Justin Scott

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

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

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

<div>
  Yup
</div>
5
Mike Rapadas

La réponse acceptée par diodus ne fonctionne pas pour certains sinon tous. Je ne pouvais toujours pas cacher à mon bouton Print this de ne pas être imprimé.

Le petit ajustement par Clint Pachl de l'appel du 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 "print" dans le fichier css avec le formatage souhaité.

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

et non 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.

3
webs

Si vous avez du Javascript qui interfère avec la propriété de style des éléments individuels, surchargeant ainsi !important, je suggère de gérer les événements onbeforeprint et onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

1
Elias Hasle