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.
Réponses:
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.
@media print { .no-print, .no-print * { display: none !important; } }
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
@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 .
Bootstrap 3 a sa propre classe appelée:
hidden-printIl 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! importantm'a sauvé.
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" />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>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>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.
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".
@media print {
.no-print {
visibility: hidden;
}
}<div class="no-print">
Nope
</div>
<div>
Yup
</div>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.
Si vous avez Javascript qui interfère avec la propriété de style des éléments individuels, donc prioritaire !important, je suggère de gérer les événements onbeforeprintet onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
@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?