Ho un link sulla mia pagina web per stampare la pagina web. Tuttavia, il collegamento è visibile anche nella stampa stessa.
Esiste un codice JavaScript o HTML che nasconderebbe il pulsante di collegamento quando faccio clic sul collegamento di stampa?
Esempio:
"Good Evening"
Print (click Here To Print)Voglio nascondere questa etichetta "Stampa" quando stampa il testo "Buona sera". L'etichetta "Stampa" non deve apparire sulla stampa stessa.
Risposte:
Nel tuo foglio di stile aggiungi:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}Quindi aggiungi class='no-print'(o aggiungi la classe no-print a un'istruzione di classe esistente) nel tuo HTML che non desideri visualizzare nella versione stampata, come il tuo pulsante.
@media print { .no-print, .no-print * { display: none !important; } }
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
@media screense si desidera definire gli stili solo schermo ma non è questo il caso qui: per impostazione predefinita vengono visualizzati tutti gli elementi e, definendo uno stile di sola stampa che nasconde l'elemento, è perfettamente sufficiente per farlo apparire sullo schermo .
Bootstrap 3 ha una sua classe per questo chiamato:
hidden-printSi definisce così:
@media print {
.hidden-print {
display: none !important;
}
}Non è necessario definirlo da soli.
In Bootstrap 4 questo è stato modificato in:
.d-print-none! importantmi ha salvato.
La migliore pratica è utilizzare un foglio di stile specifico per la stampa e impostarne l' mediaattributo print.
In esso, mostra / nascondi gli elementi che desideri stampare su carta.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />Ecco una semplice soluzione mettere questo CSS
@media print{
.noprint{
display:none;
}
}e qui è l'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>FILE CSS
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}HEADER HTML
<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >ELEMENTO
<div class="no-print"></div>È possibile posizionare il collegamento all'interno di un div, quindi utilizzare JavaScript sul tag anchor per nascondere il div quando si fa clic. Esempio (non testato, potrebbe essere necessario modificarlo ma si ottiene l'idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>Il rovescio della medaglia è che una volta cliccato, il pulsante scompare e perdono quell'opzione sulla pagina (c'è sempre Ctrl + P però).
La soluzione migliore sarebbe quella di creare un foglio di stile di stampa e all'interno di quel foglio di stile specificare lo stato nascosto printOptiondell'ID (o come lo si chiama). Puoi farlo nella sezione head dell'HTML e specificare un secondo foglio di stile con un attributo multimediale.
La cosa migliore da fare è creare una versione "solo stampa" della pagina.
Oh, aspetta ... questo non è più il 1999. Utilizzare un CSS di stampa con "display: none".
@media print {
.no-print {
visibility: hidden;
}
}<div class="no-print">
Nope
</div>
<div>
Yup
</div>La risposta accettata da diodus non funziona per alcuni, se non per tutti noi. Non riuscivo ancora a nascondere il mio Stampa questo pulsante dall'andare sulla carta.
La piccola modifica da parte di Clint Pachl della chiamata al file css aggiungendo
media="screen, print" e non solo
media="screen"sta risolvendo questo problema. Quindi, per chiarezza e perché non è facile vedere Clint Pachl nascosto ulteriore aiuto nei commenti. L'utente dovrebbe includere ", stampa" nel file CSS con la formattazione desiderata.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">e non solo il media predefinito "schermo".
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">Penso che risolva questo problema per tutti.
Se hai Javascript che interferisce con la proprietà di stile dei singoli elementi, quindi sostituendo !important, ti suggerisco di gestire gli eventi onbeforeprinte onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
@mediastampa e@mediaschermo. Nella sezione stampa, inserisci gli stili per la stampa. Nella sezione dello schermo, inserisci gli stili per la stampa dello schermo. Puoi anche avere più sezioni dello schermo per risoluzioni diverse. Fondamentalmente se aggiungi solo ciò che viene fornito in questa risposta, non funzionerà. Credimi, ci ho provato. Come sono riusciti a ottenere 69 voti positivi?