442 votos

¿Cómo hacer una página HTML en tamaño de papel A4?

¿Es posible hacer que una página HTML se comporte, por ejemplo, como una página de tamaño A4 en MS Word?

Esencialmente, quiero ser capaz de mostrar la página HTML en el navegador, y delinear el contenido en las dimensiones de una página de tamaño A4.

Para simplificar, estoy asumiendo que la página HTML sólo contendrá texto (sin imágenes, etc.) y no habrá <br> etiquetas, por ejemplo.

Además, cuando la página HTML se imprima, saldrá como páginas de papel de tamaño A4.

15 votos

0 votos

1 votos

El verdadero "HTML para imprimir" ¡se acerca! Vea toda la historia en stackoverflow.com/q/10641667/287948 y del W3C Módulo de fragmentación de nivel 3 de CSS ¡Que viene!

70voto

Tim McNamara Puntos 6478

Sería bastante fácil forzar al navegador web a mostrar la página con las mismas dimensiones en píxeles que el A4. Sin embargo, puede haber algunas peculiaridades en la representación de las cosas.

Suponiendo que tus monitores muestren 72 ppp, podrías añadir algo así:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  <head>
  <body>
  </body>
</html>

19 votos

Siguiendo la sugerencia de Will Dean (que tiene mucho sentido) utilizando milímetros, puedes forzar al navegador a calcular el ancho/alto en píxeles: body { height: 420mm; width: 297mm; ... }

52 votos

El formato A4 es en realidad 210x297 mm.

8 votos

Así que, finalmente un retrato DINA4: body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }

33voto

Oded Puntos 271275

No se puede. Los sitios web se crean para pantallas, no para impresoras.

Puede añadir un print.css , para que el sitio se imprima mejor, pero no se puede especificar un tamaño de papel como A4.

Puede encontrar más información sobre las hojas de estilo de impresión y cómo utilizarlas aquí .

La mejor solución para imprimir, es utilizar los PDF, que para eso están. Crea un PDF que tenga los mismos datos. En ese caso tienes el control total sobre el formato de impresión.

24voto

pir abdul wakeel Puntos 1040

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

Si imprime en tamaño A4.

Entonces el usuario

Size : 8.27in and 11.69 inches

@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;
} 

entonces crea un div con todo tu contenido en él.

<div class=Section1> 
type your content here... 
</div>

o

@media print {
            .page-break { height:0; page-break-before:always; margin:0; border-top:none; }
        }
     body, p, span, td, a {font-size:9pt;font-family: Arial, Helvetica, sans-serif;}
     body{margin-left:2em; margin-right:2em;}
    .page{
    height:947px;
    padding-top:5px;
    page-break-after : always;   
    font-family: Arial, Helvetica, sans-serif;
    position:relative;
   border-bottom:1px solid #000;

  }

0 votos

¿Seguro que funciona? No he podido reproducirlo en los últimos Firefox y Chrome.

0 votos

Sí, principalmente estoy haciendo el desarrollo para chrome... me funciona bien.

3 votos

No puedo conseguir @page Section1 para que funcione con Chrome 41.0.2272.77. ¿Es usted realmente ¿Seguro que tu respuesta funciona? Pruebe, por ejemplo, a visitar data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div> y abrir una vista previa de impresión. No veo ninguna diferencia entre eso y data:text/html,x . Cuando reemplazo @page x con @page entonces funciona, pero eso no es un selector específico de la página.

16voto

Will Dean Puntos 25866

He utilizado HTML para generar informes que se imprimen correctamente en tamaños reales en papel real.

Si usas cuidadosamente mm como tus unidades en el archivo CSS deberías estar bien, al menos para páginas individuales. Sin embargo, la gente puede fastidiar cambiando el zoom de impresión en su navegador.

Creo recordar que todo lo que hacía era de una sola página, por lo que no tenía que preocuparme de la paginación; eso podría ser mucho más difícil.

11voto

Jacob Puntos 111
<link rel="stylesheet" href="http://stackoverflow.com/css/style.css" type="text/css">
<link rel="stylesheet" href="http://stackoverflow.com/css/print.css" type="text/css" media="print">

En su normalidad style.css :

table.tableclassname {
  width: 400px;
}

En su print.css :

table.tableclassname {
  width: 16 cm;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X