¿Deshabilitar las opciones de impresión del navegador (encabezados, pies de página, márgenes) de la página?
He visto esta pregunta formulada de dos maneras diferentes en SO y en varios otros sitios web, pero la mayoría de ellas son demasiado específicas o están desactualizadas. Espero que alguien pueda dar una respuesta definitiva aquí sin dejarse llevar por la especulación.
¿Hay alguna manera, ya sea con CSS o JavaScript, de cambiar la configuración predeterminada de la impresora cuando alguien imprime desde su navegador? Y, por supuesto, por "impresiones desde su navegador" me refiero a algún tipo de HTML, no a PDF ni a ningún otro tipo mime que dependa de un complemento.
Tenga en cuenta:
Si algunos navegadores ofrecen esto y otros no (o si solo sabe cómo hacerlo en algunos navegadores), acepto soluciones específicas para cada navegador.
De manera similar, si conoce un navegador convencional que tiene restricciones específicas para NUNCA hacer esto, eso también es útil, pero se agradecería contar con documentación bastante actualizada. (simplemente decir "eso va en contra de la política de seguridad de XYZ" no es muy convincente cuando XYZ ha realizado cambios significativos en dicha política en los últimos tres años).
Finalmente, cuando digo "cambiar la configuración de impresión predeterminada" no me refiero para siempre, solo para mi página, y me refiero específicamente a los márgenes, encabezados y pies de página de impresión.
Soy muy consciente de que CSS ofrece la opción de cambiar la orientación de la página y los márgenes de la página. Una de las muchas luchas es con Firefox. Si configuro los márgenes de la página en 1 pulgada, AGREGA esto a la media pulgada que ya colocó.
Tengo muchas ganas de reducir el uso de archivos PDF en el sitio de mi cliente, pero la infracción en la presentación (así como la falta de confiabilidad) son su principal preocupación.
El estándar CSS permite algunos formatos avanzados. Hay una @pagedirectiva en CSS que permite algunos formatos que se aplican sólo a 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 todavía no admite la configuración del margen de página de la impresora, pero todos los demás navegadores principales ahora lo admiten.
Con la @pagedirectiva, puede especificar el margen de impresión de la página (que no es lo mismo que el margen CSS normal de un elemento HTML):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@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 */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
Tenga en cuenta que aquí básicamente deshabilitamos los márgenes específicos de la página 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 lo comentó Konrad ). Esto significa que solo funcionará correctamente si el contenido impreso es sólo de una página.
Esto no funciona en Firefox 3.6 , IE 7 , Safari 5.1.7 o Google Chrome 4.1 .
Configurar el margen @page tiene efecto en IE 8 , Opera 10 , Google Chrome 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 al tratar de resolver la ocultación del encabezado/pie de página.
Así se comporta en diferentes navegadores:
En Internet Explorer , el margen en realidad está establecido en 0 mm en la configuración para esta impresión, y si realiza la Vista previa obtendrá 0 mm de forma predeterminada, pero el usuario puede cambiarlo en la vista previa.
Verá que el contenido de la página en realidad está colocado correctamente, pero el encabezado y pie de página de impresión del navegador se muestran con un fondo no transparente, por lo que oculta efectivamente el contenido de la página en esa posición.En las versiones más recientes de Firefox , está colocado 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 Opera , el contenido de la página oculta el encabezado cuando se utiliza 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 parece 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 las versiones más recientes de Chrome , el encabezado y el pie de página del navegador están ocultos 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 Chrome 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 configurar el margen de la página en un tamaño que sea demasiado pequeño para contener el texto para desactivar esto (tomando prestado de la respuesta de awe ):
@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 */
}<ol>
<li>
<a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
</li>
<li>
<a href="javascript:print()">Print</a>
</li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>Para versiones de Firefox hasta 48 alpha 1
Puede agregar un mozNoMarginBoxesatributo a la <html>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 posteriores. Puede ver una captura de pantalla de la diferencia aquí o ver aquí un ejemplo en vivo.
Tenga en cuenta que el mozDisallowSelectionPrintatributo del ejemplo no es necesario para eliminar el texto de los márgenes; consulte ¿Qué hace el atributo mozdisallowselectionprint en PDF.js? .
Otros navegadores
Desafortunadamente, parece no haber manera de resolver este problema en Internet Explorer, por lo que tendrás que recurrir a PDF o pedir a los usuarios que desactiven 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 admiten @pagela supresión de textos de margen.
No encuentro nada en Edge y no tengo una instalación de Windows 10 disponible para probar.
Como @Awe había dicho anteriormente, ¡esta es la solución, que se confirma que funciona en Chrome!
Solo asegúrate de que esto esté DENTRO de las etiquetas principales:
<head>
<style media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* this affects the margin on the content before sending to printer */
}
</style>
</head>
Tengo una solicitud similar de un cliente que quiere eliminar el encabezado, los números de página y el pie de página HTML. En este caso, el cliente presenta una página HTML que puede funcionar como un certificado formal. La URL, la página y el encabezado agregados son irrelevantes y conducen a un producto final poco agradable. En cierto modo, parece barato.
Media=Print no ha podido desactivar estos valores predeterminados del navegador. La única solución es decirle al usuario que haga clic en el botón "Engranaje" y active o desactive esos elementos. En serio, durante 20 años no tenía idea de que podía hacer eso (¿y creemos que el usuario típico tendrá idea de cómo hacer clic en el botón de alternancia?).
Si CSS admite Media=Print, debería admitir la capacidad de controlar toda la experiencia de impresión del usuario final. Aprecio que los navegadores proporcionen campos agregados, pero ¿por qué no permitir que CSS controle la experiencia de impresión general, si eso es lo que se desea? ¡Una solución del 90% podría ser del 100% con tres campos más! Un simple:
#BrowserPrintDefaults{display:none}
bastaría.
Nuevamente, no importa si el usuario final quiere imprimirlo o no (tal vez su cliente sea muy privado y no quiera URL impresas flotando por ahí. ¿O tal vez un equipo ejecutivo utiliza sitios de colaboración privados?). Me alegra defender al usuario final, pero si alguien busca una respuesta, no responda diciendo que el usuario final tiene derecho a mostrarlo u ocultarlo. A veces es derecho del cliente pagar las facturas.
Pruebe este código, funciona al 100% para mí:
PARA Paisaje:
<head>
<style type="text/css">
@page{
size: auto A4 landscape;
margin: 3mm;
}
</style>
</head>
PARA retrato:
<head>
<style type="text/css">
@page{
size: auto;
margin: 3mm;
}
</style>
</head>
