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

html a4 size css

Question

¿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 poder mostrar la página HTML en el navegador y delinear el contenido en las dimensiones de una página de tamaño A4.

En aras de la simplicidad, asumo que la página HTML solo contendrá texto (no imágenes, etc.) y no habrá etiquetas <br> por ejemplo.

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

Answer 1

Buscando un problema similar, encontré esto: http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 es un formato de documento, como una imagen de pantalla que dependerá de la resolución de la imagen, por ejemplo, un documento A4 redimensionado a:

• 72 dpi (web) = 595 x 842 pixeles
• 300 ppp (impresión) = 2480 X 3508 píxeles (Esto es "A4" como lo conozco, es decir, "210 mm X 297 mm @ 300 ppp")
• 600 ppp (impresión) = 4960 X 7016 píxeles

Answer 2

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 tamaño A4.

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

luego 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, a,
span, td { 
    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;
}

Answer 3

El tamaño A4 es 210x297mm

Así que puedes configurar la página HTML para que se ajuste a esos tamaños con CSS:

html,body{
    height:297mm;
    width:210mm;
}

Answer 4

Es completamente posible configurar su diseño para que asuma las proporciones de una página a4. Solo tendría que configurar el ancho y el alto en consecuencia (posiblemente consulte con window.innerHeight y window.innerWidth aunque no estoy seguro de si eso es confiable).

La parte difícil es con la impresión A4. Javascript, por ejemplo, solo admite la impresión de páginas de forma rudimentaria con el método window.print . Como @Prutswonder sugirió que crear un PDF desde la página web probablemente sea la forma más sofisticada de hacerlo (aparte de proporcionar documentación PDF en primer lugar). Sin embargo, esto no es tan trivial como uno podría pensar. Aquí hay un enlace que tiene una descripción de una clase Java de código abierto para crear archivos PDF desde HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Obviamente, una vez que haya creado un PDF con impresión de proporciones A4, resultará en una impresión en A4 limpia de su página. Si eso vale la inversión de tiempo es otra pregunta.

Answer 5

Hace años, en noviembre de 2005, AlistApart.com publicó un artículo sobre cómo publicaron un libro utilizando nada más que HTML y CSS. Ver: http://alistapart.com/article/boom

Aquí hay un extracto de ese artículo:

CSS2 tiene una noción de medios paginados (piense en hojas de papel), a diferencia de los medios continuos (piense en barras de desplazamiento). Las hojas de estilo pueden establecer el tamaño de las páginas y sus márgenes. A las plantillas de página se les pueden dar nombres y los elementos pueden indicar en qué página con nombre se quieren imprimir. Además, los elementos del documento de origen pueden forzar saltos de página. Aquí hay un fragmento de la hoja de estilo que usamos:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

Al tener un editor con sede en EE. UU., Nos dieron el tamaño de página en pulgadas. Nosotros, siendo europeos, continuamos con mediciones métricas. CSS acepta ambos.

Después de configurar el tamaño y el margen de la página, necesitamos asegurarnos de que haya saltos de página en los lugares correctos. El siguiente extracto muestra cómo se generan los saltos de página después de los capítulos y apéndices:

div.chapter, div.appendix {
    page-break-after: always;
}

Además, usamos CSS2 para declarar las páginas con nombre:

div.titlepage {
  page: blank;
}

Es decir, la página del título se imprimirá en las páginas con el nombre "en blanco". CSS2 describió el concepto de páginas con nombre, pero su valor solo se hace evidente cuando los encabezados y pies de página están disponibles.

De todas formas…

Como desea imprimir en A4, necesitará diferentes dimensiones, por supuesto:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

El artículo se sumerge en cosas como la configuración de saltos de página, etc., por lo que puede leerlo completamente.

En tu caso, el truco es crear el CSS de impresión primero. La mayoría de los navegadores modernos (> 2005) admiten el zoom y ya podrán mostrar un sitio web basado en el CSS impreso.

Ahora, querrá hacer que la pantalla web se vea un poco diferente y adaptar todo el diseño para que se ajuste a la mayoría de los navegadores (incluidos los antiguos, anteriores a 2005). Para eso, tendrá que crear un archivo CSS web o anular algunas partes de su CSS de impresión. Al crear CSS para la visualización web, recuerde que un navegador puede tener CUALQUIER tamaño (piense: "móvil" hasta "televisores de pantalla grande"). Significado: para la web CSS es mejor configurar el ancho de página y el ancho de la imagen utilizando un ancho variable (%) para admitir tantos dispositivos de visualización y clientes de navegación web como sea posible.

EDITAR (26-02-2015)

Hoy, me topé con otro artículo más reciente en SmashingMagazine que también se sumerge en el diseño para imprimir con HTML y CSS ... en caso de que puedas usar otro tutorial.

EDITAR (30-10-2018)

Me ha llamado la atención porque el size CSS3 no es válido, lo que es correcto. Simplemente repití el código citado en el artículo que (como se señaló) era bueno CSS2 antiguo (lo cual tiene sentido cuando se mira el año en que aparece el artículo). y esta respuesta fue publicada por primera vez). De todos modos, aquí está el código CSS3 válido para su conveniencia de copiar y pegar:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

En caso de que creas que realmente necesitas píxeles ( deberías evitar el uso de píxeles ), deberás ocuparte de elegir el DPI correcto para imprimir:

• 72 dpi (web) = 595 x 842 pixeles
• 300 dpi (imprimir) = 2480 X 3508 pixeles
• 600 ppp (impresión de alta calidad) = 4960 X 7016 píxeles

Sin embargo, evitaría la molestia y simplemente utilizaría cm (centímetros) o mm (milímetros) para determinar el tamaño, ya que esto evita los problemas técnicos que pueden surgir según el cliente que utilice.

Answer 6

He usado 680px en informes comerciales para imprimir en páginas A4 desde 1998. El 700px no pudo ajustarse correctamente dependiendo del tamaño de los márgenes. Los navegadores modernos pueden reducir la página para que se ajuste a la página en la impresora, pero si utiliza 680 píxeles, se imprimirá correctamente en casi todos los navegadores.

Eso es HTML para usted Ejecute el fragmento de código y vea el resultado:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Answer 7

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

Si usa con cuidado mm como sus unidades en el archivo CSS, debería estar bien, al menos para páginas individuales. Sin embargo, la gente puede arruinarte cambiando el zoom de impresión en su navegador.

Parece que recuerdo que todo lo que estaba haciendo era una sola página, así que no tenía que preocuparme por la paginación, eso podría ser mucho más difícil.

Answer 8

Muchas formas de hacer:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

Answer 9

PPI y DPI no hacen absolutamente ninguna diferencia en cómo se imprimirá un documento desde un navegador. la impresora no toma información sobre el punto de la pantalla ni el DPI de las imágenes, etc. Si está imprimiendo imágenes, éstas se imprimirían en un tamaño similar en proporción a cómo se muestran en la pantalla. el procesador de impresión del navegador aumentaría el DPI de las imágenes desde algo más bien bajo como 72 ppp a cualquier DPI que sea el resto del documento. digamos que la imagen se muestra con media página de ancho, luego tiene aproximadamente 4 "de ancho físicamente. El ancho de píxel de la imagen sería de aproximadamente 300 px para mostrarse correctamente en el navegador. Para cuando se imprima a un valor nominal de 300 ppp, el procesador ha agregado píxeles. y la imagen crecerá a alrededor de 1200px, que a 300 DPI es de 4 ".

cuando se trata de elementos vectoriales o no basados ​​en píxeles, como el texto, la impresora elige su propio DPI del controlador que no se relaciona con el paso de puntos de la pantalla o el ancho del navegador, etc. Si el navegador tiene 3000px de ancho, el procesador de impresión ajustará el texto según corresponda.

Esto es lo que hace que sea difícil crear pantallas impresas: cada navegador e impresora interpretará los tamaños de texto (pt, em, px) y el espaciado a su manera. Dependiendo de qué impresora, navegador y tal vez incluso el sistema operativo que use, obtendrá una cantidad diferente de líneas y caracteres por página. por lo tanto, incluso si realiza una prueba en su computadora con su navegador e impresora y se da cuenta de que puede mostrar el texto en un cuadro a 640x900px y es perfecto en la impresión, la próxima persona que intente imprimir posiblemente lo imprima de manera diferente. realmente no hay manera de forzar a cada impresora y navegador a que sea idéntico cada vez.

olvide los píxeles y más aún olvide los DPI, lo único para lo que podría usar píxeles es configurar un ancho de tabla que simule el ancho de un área de impresión en su impresora. En ese caso encontré que 640px de ancho está cerca.

Answer 10

Sé que este tema es bastante antiguo, pero quiero compartir mi experiencia sobre ese tema. En realidad, estaba buscando un módulo que me ayude con mis informes diarios. Estoy escribiendo algunas documentaciones y algunos informes en HTML + CSS (en lugar de Word, Latex, OO, ...). El objetivo sería imprimirlos en papel A4 para compartirlo con amigos, ... En lugar de buscar, decidí tener una sesión de codificación pequeña y divertida para implementar una lib simple que pueda manejar "páginas", número de página, resumen, encabezado , pie de página, ... Finalmente, lo hice en ~~ 2h y sé que no es la mejor herramienta, pero está casi bien para mi propósito. Puede ver este proyecto en mi repositorio y no dude en compartir sus ideas. Tal vez no sea lo que está buscando al 100%, pero creo que este módulo puede ayudarlo.

Básicamente creo una página de cuerpo "ancho: 200mm;" y contenedor de altura: 290mm (más pequeño que A4). Luego utilicé el salto de página: siempre; por lo que la opción "imprimir" del navegador sabe cuándo dividir páginas.

repo: https://github.com/kursion/jsprint

Answer 11

Sería bastante fácil forzar el navegador web para que muestre la página con las mismas dimensiones de píxeles que A4. Sin embargo, puede haber algunas peculiaridades cuando se representan las cosas.

Suponiendo que sus monitores muestren 72 ppp, podría agregar algo como esto:

<!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>

Answer 12

Técnicamente, podría, pero se requeriría mucho trabajo para que todos los navegadores impriman la página exactamente como se muestra en la pantalla. Además, la mayoría de los navegadores fuerzan la URL, la fecha de impresión y la numeración de las páginas en la impresión, lo que no siempre se desea. Esto no puede ser alterado o deshabilitado.

En su lugar, le aconsejaría crear un PDF basado en el contenido de la pantalla y entregar el PDF para descargarlo o imprimirlo. Aunque la mayoría de las bibliotecas de PDF disponibles están pagadas, hay algunas alternativas gratuitas disponibles para crear PDF básicos.

Answer 13

Vi esta solución después de buscar en google, busque "plantilla de página A4 CSS" (codepen.io). Muestra un área de tamaño A4 (A3, A5, también retrato) en el navegador, utilizando la etiqueta <page>. Dentro de esta etiqueta se muestra el contenido, pero la posición absoluta sigue siendo con respecto al área del navegador.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Esto funciona para mí sin que se incluya ninguna otra biblioteca css / js. Funciona para los navegadores actuales (IE, FF, Chrome).

Answer 14

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

En su estilo style.css :

table.tableclassname {
  width: 400px;
}

En su print.css :

table.tableclassname {
  width: 16 cm;
}