Imprimir página web
Hola, he añadido a una página el típico script de imprimir página, pero me gustaría que en la impresión no apareciese una de las imágenes que aparecen en la página, ¿existe algún modo de seleccionar lo que queremos que se imprima o de clasificar como no imprimible algo? '
1 respuesta
Respuesta de scriptman
1
Esto no es javascript, sino estilo.
Desde el 98, con la salida del CSS2, los tipos de "media" (medios) están mejor soportados. Me explico:
Puedes especificar COMO se vera tu página, mediante estilo, y especificar el medio en tus css, que puede ser alguno(s) de los siguientes:
Screen-> (para pantalla, es decir, cuando ves la página en tu navegador)
Aural-> (para los navegadores de internet por sonido; por ejemplo los que usan los invidentes)
Print-> (para la impresora)
Etc..
Ahora, veamos algo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Link to a target medium</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print" href="imp.css">
<LINK rel="stylesheet" type="text/css"
media="screen" href="visual.css">
</HEAD>
<BODY>
<P>El contenido...
</BODY>
</HTML>
Aquí, especificas 2 hojas de estilo: una para cuando se imprima la página, y otra cuando se ve en el navegador.
en la primera, puedes poner
.img {visibility:hidden;}
y en la segunda nada, porq si se vera.
en tu imagen pones class="img"...
Tambien puedes especificarlo en tu html, si no usas hojas de estilo separadas:
<style type="text/css">
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { color: #000000; }
}
</style>
En este ejemplo, cuando imprimes la página, la letra sera más pequeña, para que quepa más texto por hoja, mientras que en la pantalla eso no nos interesa, y podemos poner una letra grande. Así mismo el color del texto es negro en ambos casos.
Saludos, siempre tuyo,
scriptman.(Jaja broma!)
Desde el 98, con la salida del CSS2, los tipos de "media" (medios) están mejor soportados. Me explico:
Puedes especificar COMO se vera tu página, mediante estilo, y especificar el medio en tus css, que puede ser alguno(s) de los siguientes:
Screen-> (para pantalla, es decir, cuando ves la página en tu navegador)
Aural-> (para los navegadores de internet por sonido; por ejemplo los que usan los invidentes)
Print-> (para la impresora)
Etc..
Ahora, veamos algo de código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Link to a target medium</TITLE>
<LINK rel="stylesheet" type="text/css"
media="print" href="imp.css">
<LINK rel="stylesheet" type="text/css"
media="screen" href="visual.css">
</HEAD>
<BODY>
<P>El contenido...
</BODY>
</HTML>
Aquí, especificas 2 hojas de estilo: una para cuando se imprima la página, y otra cuando se ve en el navegador.
en la primera, puedes poner
.img {visibility:hidden;}
y en la segunda nada, porq si se vera.
en tu imagen pones class="img"...
Tambien puedes especificarlo en tu html, si no usas hojas de estilo separadas:
<style type="text/css">
@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { color: #000000; }
}
</style>
En este ejemplo, cuando imprimes la página, la letra sera más pequeña, para que quepa más texto por hoja, mientras que en la pantalla eso no nos interesa, y podemos poner una letra grande. Así mismo el color del texto es negro en ambos casos.
Saludos, siempre tuyo,
scriptman.(Jaja broma!)
Perdón por ser tan pesado, pero soy bastante torpe y si pudieses aclararme un poco como utilizar los estilos que me dices te lo agradecería. Me explico, necesitaría que me aclarases lo que habría que poner exactamente tanto en las hojas de estilo como en la imagen, poniendo por ejemplo que la imagen se llame <img src="print.gif">, y si ya tengo una hoja de estilo realizada? ¿No podría usar esta?
Claro, puedes usar tu hoja de estilo, solo agregas lo siguiente:
@media print {
.noImprime { visibility:hidden; }
}
y en la imagen:
<img src="print.gif" class="noImprime">
Asi de facil :-)
@media print {
.noImprime { visibility:hidden; }
}
y en la imagen:
<img src="print.gif" class="noImprime">
Asi de facil :-)
Excelente es poco, desde este momento pasas a ser mi dios (je je), no sólo la primera respuesta a sido muy buena, sino que además ante una duda el experto ha tardado en contestarme 5 minutos o menos con el resultado que necesitaba. En serio muy bien. Gracias y un saludo.
