Tengo un enlace en mi página web para imprimir la página web. Sin embargo, el enlace también es visible en la impresión misma.
¿Hay código JavaScript o HTML que ocultaría el botón de enlace cuando hago clic en el enlace de impresión?
Ejemplo:
"Good Evening"
Print (click Here To Print)
Quiero ocultar esta etiqueta "Imprimir" cuando imprime el texto "Buenas noches". La etiqueta "Imprimir" no debe aparecer en la impresión misma.
Respuestas:
En su hoja de estilo agregue:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Luego agregue class='no-print'(o agregue la clase sin impresión a una declaración de clase existente) en su HTML que no desea que aparezca en la versión impresa, como su botón.
@media print { .no-print, .no-print * { display: none !important; } }
<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
@media screensi desea definir estilos de solo pantalla, pero este no es el caso aquí: de forma predeterminada, se muestran todos los elementos, y al definir un estilo de solo impresión que oculta el elemento es perfectamente suficiente para que todavía aparezca en la pantalla .
Bootstrap 3 tiene su propia clase para esto llamada:
hidden-printSe define así:
@media print {
.hidden-print {
display: none !important;
}
}
No tiene que definirlo por su cuenta.
En Bootstrap 4 esto ha cambiado a:
.d-print-none! importantme salvó.
La mejor práctica es utilizar una hoja de estilo específicamente para imprimir y establecer su mediaatributo en print.
En él, muestre / oculte los elementos que desea imprimir en papel.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />Aquí hay una solución simple poner este CSS
@media print{
.noprint{
display:none;
}
}
y aquí está el 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>
ARCHIVO CSS
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
Encabezado 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>Puede colocar el enlace dentro de un div, luego usar JavaScript en la etiqueta de anclaje para ocultar el div cuando se hace clic. Ejemplo (no probado, puede ser necesario modificarlo, pero se entiende la idea):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
La desventaja es que una vez que se hace clic, el botón desaparece y pierden esa opción en la página (aunque siempre hay Ctrl + P).
La mejor solución sería crear una hoja de estilo de impresión y dentro de esa hoja de estilo especificar el estado oculto de la printOptionID (o como se llame). Puede hacerlo en la sección de encabezado del HTML y especificar una segunda hoja de estilo con un atributo multimedia.
Lo mejor que puede hacer es crear una versión de la página "solo para imprimir".
Oh, espera ... esto ya no es 1999. Use una impresión CSS con "display: none".
@media print {
.no-print {
visibility: hidden;
}
}<div class="no-print">
Nope
</div>
<div>
Yup
</div>La respuesta aceptada por diodus no funciona para algunos, si no para todos. Todavía no podía ocultar mi botón Imprimir este para que no salga al papel.
El pequeño ajuste por Clint Pachl de llamar al archivo CSS agregando
media="screen, print" y no solo
media="screen"está resolviendo este problema. Entonces, para mayor claridad y porque no es fácil ver a Clint Pachl, ocultó ayuda adicional en los comentarios. El usuario debe incluir el ", imprimir" en el archivo CSS con el formato deseado.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">y no solo el medio predeterminado = "pantalla".
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">Eso creo que resuelve este problema para todos.
Si tiene Javascript que interfiere con la propiedad de estilo de elementos individuales, anulando así !important, sugiero manejar los eventos onbeforeprinty onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint
@mediaimpresión y@mediapantalla. En la sección de impresión, coloca sus estilos para imprimir. En la sección de pantalla de la pantalla, coloca sus estilos para la impresión de pantalla. Incluso puede tener múltiples secciones de pantalla para diferentes resoluciones. Básicamente, si solo agrega lo que se da en esta respuesta, no funcionará. Créeme que lo he intentado. Entonces, ¿cómo obtuvo esto 69 votos a favor?