Margen al imprimir la página html

141

Estoy usando una hoja de estilo separada para imprimir. ¿Es posible establecer el margen derecho e izquierdo en la hoja de estilo que establece el margen de impresión (es decir, margen en papel).

Gracias.

kobra
fuente

Respuestas:

247

Debe usar cmo mmcomo unidad cuando especifique para imprimir. El uso de píxeles hará que el navegador lo traduzca a algo similar a lo que se ve en la pantalla. Usar cmo mmgarantizará un tamaño uniforme en el papel.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Para tamaños de fuente, use ptpara los medios impresos.

Tenga en cuenta que establecer el margen en el cuerpo en estilo CSS no ajustará el margen en el controlador de la impresora que define el área imprimible de la impresora, o el margen controlado por el navegador (puede ser ajustable en la vista previa de impresión en algunos navegadores) ... solo establecerá el margen en el documento dentro del área imprimible.

También debe tener en cuenta que IE7 ++ ajusta automáticamente el tamaño para que se ajuste mejor y hace que todo esté mal incluso si usa cmo mm. Para anular este comportamiento, el usuario debe seleccionar 'Vista previa de impresión' y luego establecer el tamaño de impresión en 100%(el valor predeterminado es Shrink To Fit).

Una mejor opción para un control total sobre los márgenes impresos es usar la @pagedirectiva para establecer el margen del papel, lo que afectará el margen en el papel fuera del elemento del cuerpo html, que normalmente es controlado por el navegador. Ver http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Esto funciona actualmente en todos los principales navegadores, excepto Safari.
En Internet Explorer, el margen se establece realmente en este valor en la configuración de esta impresión, y si realiza la Vista previa, obtendrá esto como predeterminado, pero el usuario puede cambiarlo en la vista previa.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

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

temor
fuente
3
Esto funciona ahora en Chrome 18 e IE9 (no probé versiones anteriores). Todavía no funciona en Firefox 12, pero podría hacer una detección del lado del servidor y agregar una clase de cuerpo, <body class="firefox">por lo que en su CSS puede hacerlo body.firefox {margin: 0mm; padding: 0.25in;}, que en realidad es un margen de 0.75 pulgadas porque Firefox ya agrega 0.5in. Esto debería funcionar siempre que necesite> = márgenes de 0,5 pulgadas.
MrFusion
77
¡+1 para @page! Eso es exactamente lo que necesitaba, ya que estoy imprimiendo varias páginas.
ataque aéreo el
2
Ahora también funciona con Firefox. Dado que Firefox tiene buenas rutinas de actualización automática, esto ya no debería ser un problema que debamos abordar. He probado en IE, Opera, Chrome, Firefox y Safari. El único navegador con el que actualmente no funciona es Safari (versión 5.1.7 para Windows). No lo he probado en Mac.
asombro
1
Esto solo agrega el margen superior en la primera página. Mejor solución para configurar los mismos márgenes en todas las páginas: stackoverflow.com/questions/37033766/…
ejemplo,
@besimple: Ver ejemplo de abajo. El uso de la directiva ´ @ page´ agregará el margen en cada página.
asombro
42

En primer lugar, trato de obligar a todos mis usuarios a usar Chrome cuando imprimen porque otros navegadores crean diseños diferentes.

Una respuesta de esta pregunta recomienda:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Sin embargo, terminé usando este CSS para imprimir todas mis páginas:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}



Caso especial: mesas largas

Cuando necesitaba imprimir una tabla en varias páginas, margin:0el resultado @pageera un borde sangrante:

bordes sangrantes

Podría resolver esto gracias a esta respuesta con:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Además de configurar los márgenes superior-inferior para @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Resultado:

bordes sangrantes resueltos

Prefiero una solución concisa y que funcione con todos los navegadores. Por ahora, espero que la información anterior pueda ayudar a algunos desarrolladores con problemas similares.

Kai Noack
fuente
1
Su solución demostró ser invaluable al trabajar con la impresión de informes usando ERPNext. ¡Pude desarrollar mis propios formatos de impresión personalizados con facilidad y estos punteros me ayudaron muchísimo!
Tropicalrambler
10

Solución simple y actualizada

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Antigua solución

Cree una sección con cada página y use el siguiente código para ajustar los márgenes, la altura y el ancho.

Si está imprimiendo en tamaño A4.

Entonces usuario

Tamaño: 8.27in y 11.69 pulgadas

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

luego crea un div con todo tu contenido.

<div class="Section1"> 
    type your content here... 
</div>
Pir Abdul
fuente
Esto no me funciona en Chrome o FF. Además, class=Section1debería ser class="Section1".
nu everest
Esta es una solución más simple: stackoverflow.com/questions/37033766/…
besimple
9

Yo personalmente sugeriría usar una unidad de medida diferente a px. No creo que los píxeles tengan mucha relevancia en términos de impresión; idealmente usarías:

  • punto (pt)
  • centímetro (cm)

Estoy seguro de que hay otros, y un excelente artículo sobre print-css se puede encontrar aquí: Going to Print , de Eric Meyer .

David dice reinstalar a Mónica
fuente
1
Tienes razón que pxno tiene mucha relevancia para imprimir. Pero los navegadores "traducen" las unidades de píxeles para que se parezca a cómo se ve en la pantalla. No , no use los "puntos de resolución de la impresora" como píxeles (gracias a Dios ...).
temor
1

También recomiendo pt versus cm o mm, ya que es más preciso. Además, no puedo hacer que @page funcione en Chrome (versión 30.0.1599.69 m). Ignora todo lo que puse para los márgenes, grandes o pequeños. Pero, puede hacer que funcione con márgenes corporales en el documento, extraño.

arma de hierro
fuente
0

Si conoce el tamaño de papel de destino, puede colocar su contenido en un DIV con ese tamaño específico y agregar un margen a ese DIV para simular el margen de impresión. Desafortunadamente, no creo que tenga un control adicional sobre la funcionalidad de impresión, aparte de mostrar el cuadro de diálogo de impresión.

jonjbar
fuente
Gracias. ¿No es posible especificar dejar x píxeles a izquierda y derecha independientemente del tamaño del papel? Saludos
kobra
1
Supongo que esto podría ser posible si configura el tamaño de su DIV principal al 100% y le agrega un margen de píxeles de hacha.
jonjbar