Eliminar encabezado y pie de página de window.print ()

109

Estoy usando window.print () para imprimir la página, pero el encabezado y el pie de página contienen el título de la página, la ruta del archivo, el número de página y la fecha. ¿Cómo eliminarlos?

También intenté imprimir la hoja de estilo.

#header, #nav, .noprint
{
display: none;
}

Por favor ayuda. Gracias.

css  printing 
— Viralk
fuente
7
Estos elementos son específicos de la configuración del navegador del usuario. No creo que pueda eliminarlos mediante CSS o JavaScript.
— Michael Berkowski
Creo que esta pregunta necesita una aclaración: ¿está tratando de eliminar los elementos de encabezado y pie de página del HTML que se muestra en la pantalla o desea eliminar los encabezados y pies de página que agrega la función de impresión?
— AlanObject

Respuestas:

149

En Chrome, es posible ocultar este encabezado / pie de página automático usando

@page { margin: 0; }

Dado que el contenido se extenderá hasta los límites de la página, el encabezado / pie de página de impresión de la página estará ausente. Por supuesto, debe, en este caso, establecer algunos márgenes / rellenos en el elemento de su cuerpo para que el contenido no se extienda hasta el borde de la página. Dado que las impresoras comunes simplemente no pueden imprimir sin márgenes y probablemente no sea lo que desea, debería usar algo como esto:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Como señaló Martin en un comentario, si la página tiene un elemento largo que se desplaza más allá de una página (como una tabla grande), el margen se ignora y la versión impresa se verá extraña.

En el momento original de esta respuesta (mayo de 2013), solo funcionó en Chrome, no estoy seguro ahora, nunca tuve que volver a intentarlo. Si necesita soporte para un navegador que no se puede configurar, puede crear un PDF sobre la marcha e imprimirlo (puede crear un PDF de autoimpresión con JavaScript incorporado), pero eso es una gran molestia.

— diego nunes
fuente
2
Por alguna razón, body { margin: 1.6cm; }estaba ignorando el margen derecho para mí (tal vez porque estaba usando text-align:right), así que en su lugar creé un <div class="container">para mi contenido y lo usé .container { margin: 1.6cm; }.
— rybo111
8
Estoy probando esto con Chrome 33. Funciona muy bien, pero tenga cuidado porque body { margin: 1.6cm; }, como es un margen para todo el documento, no respetará los márgenes verticales de los documentos de varias páginas, excepto el primero y el último. Lamentablemente, no puedo pensar en una solución alternativa.
— pau.moreno
Hola @Diego, estoy contento con tu sugerencia y se eliminó el pie de página de mi encabezado, pero mi página de impresión aumentó. "body {margin: 1.6cm;}" simplemente cambie 1.6cm a 1.0cm y está funcionando .. :) Codificación feliz
— Vishal Kiri
3
Hay una respuesta más extensa aquí: stackoverflow.com/questions/1960939/…
— jedison
Eliminar el margen de la página y agregar el margen del cuerpo generaba una página vacía para mí. Cambié el margen del cuerpo a relleno y funcionó.
— André Guimarães Sakata
21

Estoy seguro de que agregar este código en su archivo css resolverá el problema

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

Puede visitar esto para saber más sobre esto

— Rudias
fuente
3
No. No está funcionando. Está estableciendo el margen, eso es todo. Todavía se muestra la URL y la fecha y hora en el encabezado y pie de página
— Estudiante
Funciona para Chrome y Firefox, pero no para IE 11.
— Sammi
21

Firefox:

  • Agregar moznomarginboxesatributo en<html>

Ejemplo:

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
fuente
6
Esto no va a funcionar más después de que Firefox 48 se libera (agosto de 2016): bugzilla.mozilla.org/show_bug.cgi?id=1260480
— Aljullu
no funciona para mí, FF 61, pero @page {margin: 0; } La solución parece funcionar también en FF.
— Kiko
11

Hoy mi colega tropezó con el mismo problema.

Sin embargo, como la solución "margin: 0" funciona para los navegadores basados ​​en cromo, Internet Explorer continúa imprimiendo el pie de página incluso si los márgenes de @page se establecen en cero.

La solución (más bien un truco) fue poner un margen negativo en la @page.

@page {margin:0 -6cm}
html {margin:0 6cm}

Tenga en cuenta que el margen negativo no funcionará para el eje Y, solo para X

Espero eso ayude.

— Nick Panov
fuente
8

El estándar CSS permite algunos formatos avanzados. Hay una directiva @page en CSS que habilita algunos formatos que se aplican solo a medios paginados (como papel). Consulte http://www.w3.org/TR/1998/REC-CSS2-19980512/page.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 current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>
Expandir fragmento

y para firefox úsalo

En Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (ver código fuente de la página :: etiqueta HTML).

En su código, reemplace <html>con<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
fuente
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— Sheak Abdulla
fuente
Esta parece ser la forma correcta de hacerlo. Incluso en mi caso en un contexto de iframe, funciona muy bien.
— TwystO
2

Esta será la solución más sencilla. Probé la mayoría de las soluciones en Internet, pero solo esto me ayudó.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— Yasitha
fuente
11
Esto no hace nada.
— noches del
1

@page { margin: 0; }funciona bien en Chrome y Firefox. No he encontrado una manera de arreglar IE a través de css. Pero puede ir a Configurar página en IE en su propia máquina en y establecer los márgenes en 0. Presione alt y luego el menú de archivo en la esquina superior izquierda y encontrará Configurar página. Esto solo funciona para una máquina a la vez ...

— Sammi
fuente
0

1. Para Chrome e IE

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
  1. Para FireFox como dijo l2aelba ,

Agregue el atributo moznomarginboxes en el ejemplo:

<html moznomarginboxes mozdisallowselectionprint>
— Nikhilus
fuente
En el código anterior, los <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> son opcionales .
— Nikhilus
0

Estaba tratando de eliminar el encabezado y el pie de página de una página html que imprimí manualmente.

Ninguna solución en esta página funcionó para mí, pero simplemente al definir mi propio pie de página como se explica aquí, Firefox no agregaría su propio encabezado y pie de página.

Desafortunadamente, esto no funciona en Chrome.

En CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Agregue esto a su HTML:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
— lwinkler
fuente
-1

Si se desplaza hacia abajo hasta este punto, encontré una solución para Firefox. Imprimirá el contenido de un div específico sin los pies de página ni los encabezados. Puede personalizarlo como desee.

En primer lugar, descargue e instale este complemento: JSPrintSetup .

En segundo lugar, escribe esta función: 

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

En tercer lugar, en su código, donde quiera que desee escribir el código de impresión, haga esto (he usado JQuery. Puede usar javascript simple):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

Obviamente, necesita el enlace para hacer clic:

<a href="#" id="print">Print my Div</a>

Y tu div para imprimir:

<div id="yourDivToPrint">....</div>
— Josías
fuente
-3

no tienes que escribir ningún código. justo antes de llamar a window.print () por primera vez, cambie la configuración de impresión de su navegador. por ejemplo en firefox:

  1. Presione Alt o F10 para ver la barra de menú
  2. Haga clic en Archivo, luego Configurar página
  3. Seleccione la pestaña Márgenes y encabezado / pie de página
  4. Cambiar URL por espacio en blanco -> imagen

y otro ejemplo para IE (estoy usando IE 11 para versiones anteriores, puede ver esto Evitar que Firefox o Internet Explorer impriman la URL en cada página ):

  1. Presione Alt o F10 para ver la barra de menú
  2. Haga clic en Archivo, luego Configurar página
  3. en la sección Encabezados y pies de página Cambiar URL por vacío.
— alireza azami
fuente
Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas de solo enlace pueden dejar de ser válidas si cambia la página enlazada. - De la crítica
— SurvivalMachine
gracias por la sugerencia SurvivalMachine. Edité mi respuesta hace unos minutos :)
— alireza azami
Hmmm ... No me apetece tener que andar entre todos mis usuarios y actualizar sus navegadores (por muchos que usen) para tener en cuenta esta aplicación, especialmente si viven en el otro lado del planeta. Además, ¿qué pasa si necesitan la configuración de otra aplicación? Ésta no es una respuesta.
— Paul
Este enfoque carece de la funcionalidad de varios navegadores que proporcionaría una función incorporada en la página / aplicación.
— Killscreen
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.