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

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

Est là javascript ou HTML code qui permettrait de masquer le bouton de lien quand je clique sur le lien imprimer?

Exemple:

 "Good Evening"
 Print (click Here To Print)

Je veux cacher cette "Impression" de l'étiquette lorsqu'elle imprime le texte "Bonne Soirée". La "Imprimer l'étiquette de" ne devrait pas apparaître lors de l'impression elle-même.

InformationsquelleAutor |
  1. 680

    Dans votre feuille de style ajouter:

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

    Puis ajouter class='no-print' (ou ajouter la non-impression de la classe à une classe existante déclaration) dans votre code HTML que vous ne souhaitez pas voir apparaître dans la version imprimée, telles que votre bouton.

    • media="print" ne fonctionne pas sur un certain site pour une raison quelconque, mais ce truc en fait. Bravo!
    • Cette réponse n'est pas complète. Vous devez avoir deux sections. @media d'impression et @media écran. Dans l'impression de la section, vous placez vos styles pour l'impression. Dans l'écran de l'écran de l'article, vous placez vos styles pour l'impression d'écran. Vous pouvez même avoir plusieurs sections screen pour différentes résolutions. Fondamentalement, si vous venez d'ajouter ce qui est donné dans cette réponse, il ne fonctionnera pas. Croyez-moi, j'ai essayé. Alors, comment cela s'69 upvotes?
    • en fait, il ne fonctionne pas si vous utilisez simplement le code qui est donner. j'ai juste essayé dans firefox. donc, au moins dans les navigateurs modernes c'est la solution.
    • J'ai essayé de cacher un <div> avec plusieurs sous-éléments à l'intérieur. Le problème est que certains éléments étaient encore visibles sur imprimer. La Solution a été d'utiliser ce css: @media print { .no-print, .no-print * { display: none !important; } }
    • Cela peut ou peut ne pas fonctionner selon le support spécifié. Par exemple, de combiner à la fois l'écran et d'imprimer des styles dans une feuille de style, puis utiliser des requêtes de média à l'intérieur de cette feuille de style, que cette réponse suggère, vous devez spécifier à la fois "écran" et "imprimer" types de médias: <link href="all.css" media="screen, print" type="text/css">
    • Voir CSS3 Media Queries
    • Je ne comprends pas votre point de vue. Vous avez seulement besoin @media screen si vous souhaitez définir d'écran seulement les styles, mais ce n'est pas le cas ici: Par défaut, tous les éléments qui sont affichés, et par la définition d'une impression de style qui cache l'élément est tout à fait suffisante pour le rendre encore apparaître sur l'écran.
    • nous avons eu des problèmes avec certains navigateurs, quand nous n'avions pas le faire de cette façon. Peut-être que la spec dit que vous ne devriez pas avoir à définir "@media screen " mais dès que nous avons ajouté '@media print " à la page cessé de fonctionner correctement dans certains navigateurs.
    • fonctionne très bien même dans IE8

    InformationsquelleAutor
  2. 164

    La meilleure pratique consiste à utiliser une feuille de style spécifiquement pour l'impression de, et son media attribut print.

    En elle, afficher/masquer les éléments que vous souhaitez être imprimé sur du papier.

    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    • Ici vous devez aussi avoir le css pour ne pas afficher les autres wrapper de contenu, changer la police de caractères de la famille à une meilleure valeur, supprimer les largeurs afin de permettre une utilisation complète de la page. Si vous définissez votre principale feuille de style pour media="screen" vous pouvez traiter votre impression de la feuille de style comme un nouveau playgound.
    • Absolument. Et avec cette approche, vous pouvez soit supprimer "Cliquez ici pour la version imprimable" ou d'ajouter "Cette page est printer-friendly" ou similaire. La bonne pratique est, comme Steve Avantages dit, retirer tous les unnessecary de contenu tels que la navigation, les annonces et la comme. Inclure uniquement le contenu principal de la page.
    InformationsquelleAutor
  3. 148

    Bootstrap 3 a ses propre de la classe pour cette appelé:

    hidden-print

    Il est défini comme ceci:

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

    Vous n'avez pas à le définir sur votre propre.

    Dans Bootstrap 4 ce qui a changé:

    .d-print-none
    • Grand Bootstrap 4 solution. Fonctionne comme un charme.
    InformationsquelleAutor
  4. 32

    Voici une solution simple
    mettre cette CSS 

    <style>
@media print{
   .noprint{
       display:none;
   }
}

    et voici le code 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>
    • Une classe serait un meilleur choix qu'un id ici, pour la simple raison que si vous utilisez un id, vous ne pouvez alors appliquer cette règle à une chose par page. Une classe vous permettra de l'appliquer là où il le faut.
    • oui , vous avez raison. Je l'ai fait.
    • a fonctionné à merveille. merci
    InformationsquelleAutor
  5. 12

    FICHIER CSS 

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


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

    D'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>
    InformationsquelleAutor
  6. 9

    Vous pouvez placer le lien à l'intérieur d'un div, puis utiliser JavaScript dans la balise d'ancrage pour cacher la div lorsque l'utilisateur clique dessus. Exemple (non testé, peut-être besoin d'être modifié, mais vous voyez 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 que une fois cliqué, le bouton disparaît et ils perdent cette option sur la page (il y a toujours Ctrl+P, si).

    La meilleure solution serait de créer une impression de la feuille de style et à l'intérieur de cette feuille de style spécifier l'état masqué de la printOption ID (ou ce que vous appelez). Vous pouvez le faire dans la section head du HTML et spécifier une deuxième feuille de style avec un attribut media.

    • +1 , bon truc
    InformationsquelleAutor
  7. 6

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

    Oh, attendez... ce n'est pas 1999 plus. L'utilisation de l'impression d'un CSS avec "display: none".

    • il y a encore une certaine valeur dans la version imprimable, car il affiche clairement à l'utilisateur ce qu'ils vont obtenir quand ils d'impression qui peuvent être victimes de violence avec des techniques CSS
    • ajouté à cela, vous pouvez inclure du contenu supplémentaire sur une version imprimée comme références de lien, pieds de page, etc. Dans les jours à venir, un grand nombre de ce qui sera réalisable grâce aux css trop bien.
    • L'utilisateur peut déjà obtenir qu'à l'aide de "Aperçu avant Impression" sur leur navigateur. Comme un bonus, c'est exactement ce qu'il est.
    InformationsquelleAutor
  8. 5

    CSS:

    @media print {
  .no-print {
    visibility: hidden;
  }
}

    HTML:

    <div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

    InformationsquelleAutor
  9. 3

    La accepté de répondre par diodus ne fonctionne pas pour certains si pas tous d'entre nous.
    Je ne pouvais pas toujours cacher mes Imprimer ce bouton de sortir sur papier.

    Le peu d'ajustement par Clint Pachl de l'appel de fichier css en ajoutant sur

          media="screen, print"

    et pas seulement

          media="screen"

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

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

    et non pas la valeur par défaut media = "screen" seulement.

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

    Que je pense résout ce problème pour tout le monde.

    InformationsquelleAutor
  10. 1

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

    InformationsquelleAutor