Verificamos exhaustivamente cada uno de los posts en nuestra web con la meta de enseñarte en todo momento la información con la mayor veracidad y actualizada.
Solución:
El estándar CSS permite algunos formatos avanzados. Hay un @page directiva en CSS que habilita algún formato que se aplica solo a los medios paginados (como el papel). Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
La desventaja es que el comportamiento en diferentes navegadores no es consistente. Safari aún no admite la configuración del margen de la página de la impresora, pero todos los demás navegadores principales ahora lo admiten.
Con el @page directiva, puede especificar el margen de impresora de la página (que no es lo mismo que el margen CSS normal de un elemento HTML):
Print Test
Top line
Line 2
Tenga en cuenta que básicamente deshabilitamos los márgenes específicos de la página aquí para lograr el efecto de eliminar el encabezado y el pie de página, por lo que el margen que configuramos en el cuerpo no se usará en los saltos de página (como comentó Konrad) Esto significa que solo funcionará correctamente si el contenido impreso es sólo una página.
Esto no funciona en Firefox 3.6, IE 7, Safari 5.1.7 o Google cromo 4.1.
Establecer el margen @page tiene efecto en ES 8, Ópera 10, Google cromo 21 y Firefox 19.
Aunque los márgenes de la página están configurados correctamente para su contenido en estos navegadores, el comportamiento no es ideal para tratar de resolver la ocultación del encabezado/pie de página.
Así es como se comporta en diferentes navegadores:
-
En explorador de Internetel margen en realidad está establecido en 0 mm en la configuración de esta impresión, y si hace Vista previa, obtendrá 0 mm por defecto, pero el usuario puede cambiarlo en la vista previa.
Verá que el contenido de la página en realidad son posicionado correctamente, pero el encabezado y el pie de página de impresión del navegador se muestran con un fondo no transparente y, por lo tanto, ocultan efectivamente el contenido de la página en esa posición. -
En Firefox versiones más nuevas, es posicionado correctamente, pero se muestran tanto el texto del encabezado/pie de página como el texto del contenido, por lo que parece una mala combinación del texto del encabezado del navegador y el contenido de su página.
-
En Ópera, el contenido de la página oculta el encabezado cuando se usa un fondo no transparente en el css estándar y la posición del encabezado/pie de página entra en conflicto con el contenido. Bastante bien, pero se ve extraño si el margen se establece en un valor pequeño que hace que el encabezado sea parcialmente visible. Además, el margen de la página no está configurado correctamente.
-
En Cromo En las versiones más recientes, el encabezado y el pie de página del navegador se ocultan si el margen @page se establece tan pequeño que la posición del encabezado/pie de página entra en conflicto con el contenido. En mi opinión, así es exactamente como debería comportarse.
Entonces la conclusión es que Cromo tiene la mejor implementación de esto con respecto a ocultar el encabezado/pie de página.
Cualquier versión reciente de Chrome y Opera, así como Firefox 48 alpha 1 y superior
Puede establecer el margen de la página en un tamaño que sea demasiado pequeño para contener el texto para deshabilitar esto (tomando prestado de la respuesta de asombro):
@page
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
html
background-color: #FFFFFF;
margin: 0px; /* this affects the margin on the HTML before sending to printer */
body
border: solid 1px blue;
margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
Para versiones de Firefox hasta 48 alpha 1
Puedes agregar un mozNoMarginBoxes attribute al etiqueta para evitar que se impriman la URL, los números de página y otras cosas que Firefox agrega al margen de la página.
Está funcionando en Firefox 29 y en adelante. Puede ver una captura de pantalla de la diferencia aquí, o ver aquí un ejemplo en vivo.
Tenga en cuenta que el mozDisallowSelectionPrint attribute en el ejemplo es no obligado a eliminar el texto de los márgenes; ver ¿Qué imprime mozdisallowselection? attribute en PDF.js hacer?.
Otros navegadores
Desafortunadamente, parece que no hay forma de resolver este problema en Internet Explorer, por lo que tendrá que recurrir a PDF o solicitar a los usuarios que deshabiliten los textos de margen.
Lo mismo ocurre con Safari; según un comentario de @Luiz Perez, las versiones más recientes de Safari (8, 9.1 y 10) aún no soportan @page para suprimir textos de margen.
No puedo encontrar nada en Edge y no tengo una instalación de Windows 10 disponible para probar.
Como dijo @Awe anteriormente, ¡esta es la solución, que se confirma que funciona en Chrome!
Solo asegúrese de que esto esté DENTRO de las etiquetas de encabezado:
Valoraciones y comentarios
Puedes animar nuestra investigación poniendo un comentario y puntuándolo te damos la bienvenida.