Tengo un enlace en mi página web para imprimir la página web. Sin embargo, el enlace también es visible en la propia impresión.
¿Existe un código javascript o HTML que pueda ocultar el botón del enlace cuando hago clic en el enlace de impresión?
Ejemplo:
idioma: lang-none -->
"Good Evening"
Print (click Here To Print)
Quiero ocultar esta etiqueta "Imprimir" cuando se imprime el texto "Buenas tardes". La etiqueta "Imprimir" no debe aparecer en la propia impresión.
En su hoja de estilo añada:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
A continuación, añada class='no-print'
(o añada la clase no-print a una declaración de clase existente) en su HTML que no desea que aparezca en la versión impresa, como su botón.
La mejor práctica es utilizar una hoja de estilo específica para la impresión, y establecer su atributo media
como print
.
En ella, muestre/oculte los elementos que desee que se impriman en papel.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Podría colocar el enlace dentro de un div, y luego utilizar JavaScript en la etiqueta de anclaje para ocultar el div cuando se hace clic. Ejemplo (no probado, puede ser necesario ajustar, pero usted consigue 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 (siempre hay Ctrl + P sin embargo).
La mejor solución sería crear una hoja de estilos de impresión y dentro de esa hoja de estilos especificar el estado oculto del ID printOption
(o como lo llames). Puedes hacer esto en la sección head del HTML y especificar una segunda hoja de estilo con un atributo media.