¿Deshabilita las opciones de impresión del navegador (encabezados, pies de página, márgenes) desde la página?

182

He visto esta pregunta en un par de formas diferentes en SO y en varios otros sitios web, pero la mayoría de ellos son demasiado específicos o están desactualizados. Espero que alguien pueda proporcionar una respuesta definitiva aquí sin complacer a la especulación.

¿Hay alguna manera, ya sea con CSS o JavaScript, de 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 dependiente del complemento.

Tenga en cuenta:

Si algunos navegadores ofrecen esto y otros no (o si solo sabe cómo hacerlo para algunos navegadores), agradezco las soluciones específicas del navegador.

Del mismo modo, si conoce un navegador convencional que tiene restricciones específicas contra NUNCA hacer esto, eso también es útil, pero se agradecería 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 quiero decir para siempre, solo para mi página, y me refiero específicamente a márgenes de impresión, encabezados y 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 en 1 pulgada, lo AGREGA 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 fiabilidad) son su principal preocupación.

javascript html css browser printing Antonio
fuente
¿Hay alguna razón específica por la que quieres hacerlo? Si usted dice que el requisito, entonces tal vez podría haber una otra posible solución ... Para mí el cambio de la configuración del usuario no se ve como una buena solución ...
Nivas
1
Estoy de acuerdo. No quiero cambiar la configuración del usuario. Quiero sobrescribir la configuración predeterminada del navegador. Y la razón es porque la alternativa es usar un PDF, que parece innecesario cuando todo lo demás se puede hacer para imprimir a través de CSS.
Anthony
Veo que has verificado la respuesta como la solución, pero funciona SOLO en Chrome. ¿ha podido obtener una solución correcta entre navegadores? o al menos en algunos navegadores? porque tengo el mismo problema
mavili 03 de
@mavili, consulte stackoverflow.com/a/23778125/453605 para obtener una solución de navegador cruzado.
Marcello Nuccio

Respuestas:

200

El estándar CSS permite un formato avanzado. Hay una @pagedirectiva en CSS que permite algún formato que se aplica solo a los medios paginados (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 todavía 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 la @pagedirectiva, 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 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 establecemos 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 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 @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í es como se comporta en diferentes navegadores:

  • En Internet Explorer , el margen se establece en 0 mm en la configuración de esta impresión, y si realiza la 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 está 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 las versiones más recientes de Firefox , está 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 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. 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 @page está configurado 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.

temor
fuente
1
Para aclarar, esto no parece eliminar los encabezados con Firefox 21 o IE10, aunque sospecho que causó que el encabezado / pie de página no ocupe espacio. Funciona con Chrome 28.
amh15
2
He actualizado para reflejar las versiones más nuevas del navegador. Chrome tiene ahora la mejor implementación de esto.
asombro
@SearchForKnowledge: Sí, es como dije: si lee mi respuesta en la descripción de cómo se comporta en IE: "Verá que el contenido de la página está realmente colocado correctamente, pero el encabezado y el pie de página de impresión del navegador ocultan la página contenido en esa posición ". Digo que "tiene efecto" en IE 8, no es que funcione como queremos ... Editaré mi respuesta para aclarar esto.
asombro
Elimina los encabezados, pero también el margen izquierdo. Así que todo mi texto está en el borde de la página ahora.
Mittchel el
77
Esta solución simplemente no funciona en absoluto , porque los @pagemárgenes y los bodymárgenes son cosas fundamentalmente diferentes: el bodymargen solo se aplica a todo el cuerpo , es decir, la parte superior de la primera página y la parte inferior de la última página. Para todas las páginas intermedias, la parte superior / inferior seguirá teniendo un margen cero.
Konrad Rudolph
86

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 prestada 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 */
}
<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>
Expandir fragmento

Para versiones de Firefox hasta 48 alfa 1

Puede agregar un mozNoMarginBoxesatributo a la <html>etiqueta para evitar que se imprima 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 mozDisallowSelectionPrintatributo en el 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 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 vale para Safari; Según un comentario de @Luiz Pérez , las versiones más recientes de Safari (8, 9.1 y 10) aún no son compatibles @pagecon la supresión de textos de margen.

No puedo encontrar nada en Edge y no tengo una instalación de Windows 10 disponible para probar.

usuario2428118
fuente
55
Sinceramente, estoy de acuerdo con esto. Incluso funciona en Chrome si imprime usando "Diálogo del sistema". solo asegúrate de que <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>esté configurado. Fuente:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
Peter
3
Funciona muy bien en Firefox. Así que esto junto con el @page{ size: auto; margin: 3mm; } soporte de Chrome y Safari hizo una solución de navegador cruzado para mí.
Clain Dsilva
Esta solución funciona muy bien para eliminar información / contenido no deseado en materiales impresos en FF. ¡Gracias!
Varvara Jones
Esto es genial, pero ¿qué pasa con IE?
Santosh
1
Probé este fragmento en Safari 8, 9.1 y 10 y no elimina el encabezado o pie de página en esas versiones de Safari.
Luis Perez
21

Como @Awe había dicho anteriormente, esta es la solución, ¡¡se confirma que funciona en Chrome !!

Solo asegúrate de que 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>
Trabajos
fuente
3
Esta es una muy buena solución! Elimina los márgenes y elimina el encabezado y el pie de página. Mi único cambio fue agregar padding: 0.25in 0.5in;los estilos de carrocería para tener los márgenes exactos que necesito para una impresión bonita y limpia. Trabajando en Chrome v25, y afortunadamente para este proyecto en particular, podemos pedir a los usuarios finales que elijan entre un par de navegadores modernos.
Charlie Schliesser
2
Desafortunadamente, esto causa problemas con las impresiones de varias páginas. El texto en la parte inferior de la página se recorta.
Jonathan
Funciona perfectamente en Chrome 67.0.3396.99 y Firefox 62.0b5 con salida de una sola página.
Killscreen
16

Tengo una solicitud similar de un cliente que desea 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 menos que agradable. De alguna manera, solo parece barato.

Medios = Imprimir 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 / desactive esos elementos. En serio, no tenía idea de que podrí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, debería admitir la capacidad de controlar toda la experiencia de impresión del usuario final. Aprecio que los navegadores proporcionen los 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 es cuestión de si el usuario final quiere o no imprimirlo (tal vez su cliente es muy privado y no quiere URL impresas flotando. ¿O tal vez un equipo ejecutivo usa sitios de colaboración privados?). Me alegra defender al usuario final, pero si alguien busca 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.

CALIFORNIA
fuente
Finalmente me rendí, tanto como no quería. Definitivamente estoy de acuerdo en que esto debería estar expuesto en CSS, ya que todos los navegadores tienen esta configuración y es un elemento de presentación. Pero en cambio, esta es una escena como una preferencia de nivel de aplicación, como tener las cookies desactivadas.
Anthony
1
Es un estándar CSS oficial que utiliza la @Pagedirectiva para establecer el margen de la impresora (que no es lo mismo que el margen del cuerpo de la página html). Actualmente, esto es compatible con todos los principales navegadores, excepto Safari, pero la forma en que afecta el encabezado / pie de página varía. Las mejores implementaciones están en Opera y Chrome.
asombro
6

Prueba este código, funciona 100% para mí:
FOR Landscape:

<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>
Iyes boy
fuente
1
Las reglas de la página CSS establecerán los márgenes, pero no eliminarán el encabezado y el pie de página integrados colocados por el navegador (URL de la página, número de página, etc.)
Anthony
0

Como mencionó "dentro de su navegador" y Firefox, si está utilizando Internet Explorer, puede deshabilitar el encabezado / pie de página configurando temporalmente el valor en el registro, consulte aquí para ver un ejemplo. AFAIK No he oído hablar de una forma de hacer esto 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 cordiales, Tom.

t0mm13b
fuente
1
En IE7 +, puede deshabilitar el encabezado / pie de página haciendo clic en el botón Vista previa de impresión. ¡No es necesario hacerlo en el registro!
temor
0

@page margin: 0mm ahora funciona en Firefox 19.0a2 (2012-12-07).

Thinsoldier
fuente
0

Resolví mi problema usando algunos CSS en la página web.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
Kabir Hossain
fuente
0

Esto funcionó para mí con un margen de aproximadamente 1 cm

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
afshin
fuente