javascript - pagina - ¿Deshabilita las opciones de impresión del navegador(encabezados, pies de página, márgenes) de la página?
quitar encabezado y pie de pagina al imprimir javascript (9)
Cualquier versión reciente de Chrome y Opera, así como Firefox 48 alpha 1 y superior
Puede configurar el margen de la página a un tamaño que sea demasiado pequeño para contener el texto a fin de desactivarlo (tomando prestado de la respuesta asombrosa):
@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 alfa 1
Puede agregar un atributo mozNoMarginBoxes a la etiqueta <html> para evitar que se mozNoMarginBoxes 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 en adelante. Puede ver una captura de pantalla de la diferencia aquí , o ver aquí un ejemplo en vivo.
Tenga en cuenta que el atributo mozDisallowSelectionPrint en el ejemplo no es necesario para eliminar el texto de los márgenes; ver ¿Qué hace el atributo mozdisallowselectionprint en PDF.js? .
Otros navegadores
Desafortunadamente, parece que hay una forma de resolver este problema en Internet Explorer, por lo que tendrá que recurrir a PDF o solicitar a los usuarios que desactiven los textos de margen.
Lo mismo vale para Safari; de acuerdo con un comentario de @Luiz Pérez , las versiones más recientes de Safari (8, 9.1 y 10) aún no admiten @page para suprimir textos de margen.
No puedo encontrar nada en Edge y no tengo una instalación de Windows 10 disponible para probar.
He visto esta pregunta de dos maneras diferentes en SO y varios otros sitios web, pero la mayoría de ellos son demasiado específicos o están desactualizados. Espero que alguien pueda dar una respuesta definitiva aquí sin caer en la especulación.
¿Hay alguna manera, ya sea con CSS o javascript, para cambiar la configuración predeterminada de la impresora cuando alguien imprime dentro de su navegador? Y, por supuesto, por "impresiones desde su navegador" me refiero a alguna forma de HTML, no PDF o algún otro tipo de mime.
Tenga en cuenta:
Si algunos navegadores ofrecen esto y otros no (o si solo sabes cómo hacerlo para algunos navegadores), doy la bienvenida a las soluciones específicas del navegador.
Del mismo modo, si conoce un navegador convencional que tiene restricciones específicas contra EVER al hacer esto, también es útil, pero se agradecerá una 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 de impresión, los encabezados y los pies de página.
Soy muy consciente de que CSS ofrece la opción de cambiar la orientación de la página, así como los márgenes de la página. Una de las muchas luchas es con Firefox. Si configuro los márgenes de la página a 1 pulgada, AGREGA esto a la media pulgada que ya está en su lugar.
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.
@page margin: 0 mm ahora funciona en Firefox 19.0a2 (2012-12-07).
Antonio,
Es desafortunado que tanta gente no haya entendido tu pregunta. Tengo una solicitud similar de un cliente que quiere que se eliminen 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 duplicar como un certificado formal. La URL agregada, la página y el encabezado son irrelevantes y conducen a un producto final poco agradable. De alguna manera, 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 "Gear" y activar o desactivar esos elementos. En serio, no tenía idea de que podía hacer eso durante 20 años (¿y creemos que el usuario típico tendrá una pista para hacer clic en el botón de alternar?).
Si CSS admite Media = Print, debe admitir la capacidad de controlar la experiencia de impresión del usuario final. Aprecio que los navegadores brinden los campos adicionales, pero, ¿por qué no permitir que CSS controle la experiencia general de impresión ?, si eso es lo que se desea. ¡Una solución al 90% podría ser del 100% con tres campos más! Un simple:
#BrowserPrintDefaults{display:none}
bastaría.
Una vez más, no es una cuestión si el usuario final quiere imprimirlo o no (tal vez su cliente es muy privado y no quiere que las URL impresas estén flotando. ¿O tal vez un equipo ejecutivo usa sitios de colaboración privada?). Me alegra defender al usuario final, pero si alguien está buscando una respuesta, no responda diciendo que es el derecho del usuario final mostrar u ocultar. A veces es el derecho del cliente pagar las facturas.
Entonces ... sin hackear el registro ni forzar al usuario a cambiar la configuración en la vista previa de impresión, ¿alguien encuentra una respuesta?
Como dijo @Awe, la solución es confirmada para funcionar en Chrome.
Solo asegúrese de que esté dentro de las etiquetas de encabezado:
<head>
<style type="text/css" 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>
Como ha mencionado "dentro de su navegador" y de Firefox, si está utilizando Internet Explorer, puede desactivar el encabezado / pie de página estableciendo temporalmente el valor en el registro, vea here un ejemplo. AFAIK No he oído hablar de una forma de hacerlo en otros navegadores. Las respuestas de Daniel y Mickel parecen colisionar entre sí, supongo que podría haber una configuración similar en algún lugar del registro para que Firefox elimine los encabezados / pies de página o los personalice. ¿Lo haz revisado?
Espero que esto ayude y Felices fiestas, Saludos, Tom.
No hay forma de cambiar la configuración de la impresora, los márgenes o cualquier otra configuración del navegador, temporal o permanentemente, desde CSS o JavaScript.
Si bien esto es desafortunado para su requisito genuino, estas restricciones son la razón por la cual el 95% de los usuarios de la web mantienen JavaScript habilitado en sus navegadores. ( Estadísticas del navegador )
Prueba 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 Portait:
<head>
<style type="text/css">
@page{
size: auto;
margin: 3mm;
}
</style>
</head>
Resolví mi problema usando
<style media="print">
@page {
size: auto;
margin: 0;
}
</style>
El estándar CSS permite algunos formatos avanzados. Existe una directiva @page en CSS que habilita algunos formatos que solo se aplican a los medios de búsqueda (como el papel). Ver http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Lo malo es que el comportamiento en diferentes navegadores no es consistente. Safari aún no admite el ajuste del margen de la página de la impresora, pero todos los otros navegadores principales ahora lo admiten.
Con la directiva @page , puede especificar el margen de la impresora 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 básicamente desactivamos 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 establecemos en el cuerpo no se usará en saltos de página (como comenta Konrad ) Esto significa que solo funcionará correctamente si el contenido impreso es solo una página.
Esto no funciona en Firefox 3.6 , IE 7 , Safari 5.1.7 o Google Chrome 4.1 .
Establecer el margen de @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 para tratar de resolver el ocultamiento del encabezado / pie de página.
Así es como se comporta en diferentes navegadores:
En Internet Explorer , el margen está realmente configurado en 0 mm en la configuración para esta impresión, y si lo hace, obtendrá 0 mm como valor predeterminado, pero el usuario puede cambiarlo en la vista previa.
Verá que el contenido de la página en realidad está posicionado correctamente, pero el encabezado y el pie de página del navegador se muestran con un fondo no transparente, por lo que oculta de manera efectiva el contenido de la página en esa posición.En las versiones más nuevas de Firefox , está posicionado correctamente, pero tanto el texto del encabezado / pie de página como el texto del contenido se muestran, por lo que parece una mala combinación de texto del encabezado del navegador y el contenido de la página.
En Opera , 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. Muy 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 nuevas de Chrome , el encabezado y el pie de página del navegador están ocultos si el margen de @page está configurado de forma tan pequeña que la posición del encabezado / pie de página entra en conflicto con el contenido. En mi opinión, esto es exactamente cómo 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.