@media print: Estilos para imprimir desde el navegador
En el navegador web tenemos una funcionalidad para imprimir la página web que estamos visualizando, pero no siempre tiene que ser igual el contenido de la página web al contenido impreso, a la hora de imprimir se pueden aplicar/modificar/ocultar nuevos estilos.
Para imprimir desde el navegador podemos bien poner un botón con un evento que abra la ventana de impresión automáticamente:
<form> <input type='button' onclick='window.print();' value='Imprimir' /></form> |
o de forma manual abrir la ventana desde las opciones del navegador, en el caso de Firefox sería: menú/imprimir.
Antes de nada vamos a ver un ejemplo práctico, en pantalla veremos unos estilos diferentes a los que veremos en el modo «imprimir».
VER EJEMPLO ESTILOS CSS IMPRESIÓN
- @media print
Todos los estilos que vamos a ver a continuación se deberán aplicar dentro de la clase @media print (dentro de nuestra hoja de estilos «.css»), para indicarle que únicamente se apliquen cuando abramos la opción imprimir del navegador.
@media print { //incluir estilos aquí } |
- @page
Se usa para hacer referencia a toda la página a visualizar (comportamiento de la página), un caso por ejemplo sería darle un padding a toda la página.
@page { padding: 10%; } |
- Display
Es uno de los estilos más usados para estos casos, su función es ocultar/mostrar contenido a la hora de presentar la vista de impresión, en este caso indicaremos que se oculte nuestra clase noImprimir.
.noImprimir{ display:none } |
- !important
Algunas veces vemos que nuestros estilos no se visualizan a la hora de entrar en modo impresión, pongamos un ejemplo tenemos un bloque con una propiedad css (background-color) y a la hora de imprimir desaparece el color, para forzar a que se muestre los estilos se agregará el atributo !important (el estilo deberá ir dentro de la clase @media print).
@media print { background-color: #F5F5F5 !important; } |
- Size
Con el atributo landscape visualizamos la impresión en formato horizontal, si se quiere vertical se deberá de usar portrait. También se le puede pasar otro parámetro para indicarle el tamaño estándar del papel como: A4, A3…
@page {size: landscape} @page {size: A4 landscape} |
- a[href]:after
Con los siguientes estilos ocultaremos el contenido del atributo href = «» pertenecientes a enlaces.
a:after { content:''; } a[href]:after { content: none; } |
- webkit-print-color-adjust
Se usa para navegadores con el motor WebKit y se usa para evitar que el navegador de forma automática oculte o cambie colores, imágenes… tiene dos atributos que son: economy | exact, si queremos que el navegador no cambie nada se usará exact como a continuación.
* { -webkit-print-color-adjust: exact; } |
- Saltos de Página
- page-break-after: Se utiliza para indicar el tipo de salto de página que se desea después de un elemento/s, los parámetros posibles son: auto, always, avoid, left, right, inherit
* { page-break-after: always; } |
- page-break-before: Se utiliza para indicar el tipo de salto de página que se desea antes de un elemento/s, los parámetros posibles son: auto, always, avoid, left, right, inherit
* { page-break-before: always; } |
- page-break-inside: Se utiliza para indicar el tipo de salto de página que se desea dentro de un elemento/s, los parámetros posibles son: auto, avoid, inherit
* { page-break-inside: auto; } |
- Configuración desde el navegador
Existen ciertos elementos (componentes pertenecientes a encabezados y pies) que no pueden ocultarse mediante estilos CSS y deben configurarse desde el propio navegador algunos casos son:
- Mostrar/ocultar la hora de impresión.
- Mostrar/ocultar dirección/título.
- Mostrar/ocultar número de páginas.
- Cambiar de forma predeterminada la orientación de la página.
Hola amigo tengo una duda y he estado buscando por Internet y no consigo una solución… Como hago si quiero que en cada pagina se genere un encabezado???
Lo siento pero tampoco lo sé, ni tampoco sé si es posible lo que quieres hacer.
Quizás tengas que plantearte utilizar alguna herramienta como:
http://community.jaspersoft.com/project/jaspersoft-studio
Saludos.
hola amigo! necesitas utilizar una librería en el caso de que estes utilizando php puedes utilizar TCPDF esta librería es para crear archivos pdf y te permite imprimir y crear los documentos con encabezado y pie de pagina en cada pagina te dejo el link https://tcpdf.org