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

Question

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

Básicamente, quiero mostrar la página HTML en el navegador y describir el contenido en las dimensiones de una página de tamaño A4.

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

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

Answer 1

Edad, en noviembre de 2005, AlistApart.com publicó un artículo sobre la forma en que publicaron un libro usando nada más que HTML y CSS. Ver: http://alistapart.com/article/boom

He aquí un extracto de dicho artículo:

CSS2 tiene una noción de los medios paginados (hojas de pensar en el papel), a diferencia de los medios continuos (piensa barras de desplazamiento). Las hojas de estilo pueden establecer el tamaño de las páginas y sus márgenes. Las plantillas de página pueden recibir nombres y los elementos pueden indicar qué página con nombre quiere que se impriman. Además, los elementos en el documento fuente 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; 
} 

Tener una editorial con sede en Estados Unidos, 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 de página y el margen, necesitamos asegurarnos de que haya saltos de página en los lugares correctos. El extracto siguiente muestra cómo los saltos de página se generan después de capítulos y apéndices:

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

Además, se emplearon CSS2 para declarar páginas denominadas:

div.titlepage { 
    page: blank; 
} 

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

En fin ...

Desde desea imprimir A4, tendrá diferentes dimensiones del curso:

@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 la página-breaks, etc por lo que Quizás quiera leer eso por completo.

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

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

EDITAR (26-02-2015)

Hoy, me pasó a tropezar con otra, más reciente article at SmashingMagazine que también se sumerge en el diseño para la impresión con HTML y CSS ... por si acaso usted podría utilizar todavía- otro-tutorial.

Answer 2

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

En su lugar, aconsejaría crear un PDF basado en los contenidos en la pantalla y servir el PDF para descargarlo o imprimirlo. Aunque se pagan most available PDF libraries, hay unos pocos free alternatives disponibles para crear archivos PDF básicos.

Answer 3

Sería bastante fácil obligar al navegador web a mostrar la página con las mismas dimensiones en píxeles que A4. Sin embargo, puede haber algunas peculiaridades cuando se procesan las cosas.

Suponiendo sus monitores muestran 72 dpi, se podría añadir 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 4

He usado HTML para generar informes que copia impresa correctamente en tamaños reales sobre el papel real.

Si utiliza cuidadosamente 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 hacía era una página, así que no tenía que preocuparme por la paginación, eso podría ser mucho más difícil.

Answer 5

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

La parte difícil es imprimir A4. Javascript, por ejemplo, solo admite la impresión de páginas rudimentariamente con el método window.print. Como @Prutswonder sugirió crear un PDF desde la página web probablemente sea la manera más sofisticada de hacerlo (aparte de proporcionar documentación en 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 la impresión de proporciones A4, obtendrá una impresión A4 limpia de su página. Si eso vale la pena el tiempo de inversión es otra pregunta.

Answer 6

PPI y DPI no hacen absolutamente ninguna diferencia en cómo se imprimirá un documento en un navegador. la impresora no toma información sobre el tono de punto de la pantalla o el DPI de las imágenes, etc. si está imprimiendo imágenes que imprimirían a 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 de algo bastante bajo como 72 ppp a cualquier DPI que el resto del documento. Supongamos que la imagen se muestra como media página de ancho, luego mide aproximadamente 4 "de ancho físicamente. El ancho de píxel de la imagen sería aproximadamente 300px para mostrarse correctamente en el navegador. Para el momento en que imprime a 300DPI nominal, el procesador tiene píxeles agregados. y la imagen crecerá a alrededor de 1200px que a 300 DPI es 4 ".

cuando se trata de vector o elementos no basados ​​en píxeles, como texto, la impresora elige su propio DPI del conductor, que doesnt se relacionan con la pantalla tamaño de punto o un navegador ancho, etc, si el navegador es 3000px de ancho, el procesador de impresión envolverá texto según corresponda

heres lo que dificulta la creación de pantallas de impresión: 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 utilice, obtendrá una cantidad diferente de líneas y caracteres por página. así que incluso si prueba en su computadora con su navegador e impresora y descubre que puede mostrar el texto en un cuadro a 640x900px y es perfecto en la impresión, el siguiente tipo que intente imprimir posiblemente imprima de manera diferente. realmente no hay forma de obligar a cada impresora y navegador a que sea idéntico cada vez.

Olvidémonos de los píxeles y más me olvidé de los DPI, lo único que podría usar píxeles para establecer un ancho de tabla que simule el ancho de un área imprimible en su impresora. en ese caso encontré que 640px de ancho está cerca.

Answer 7

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

su correcto style.css:

table.tableclassname { 
    width: 400px; 
} 

En su print.css:

table.tableclassname { 
    width: 16 cm; 
} 

Answer 8

Buscando problema similar me encontré con 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, f o ejemplo un documento A4 cambia de tamaño para:

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

Answer 9

Crear sección con cada página, y utilizar el código de abajo para ajustar los márgenes, altura y anchura.

Si está imprimiendo en tamaño A4.

A continuación, 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; 
} 

continuación, crear un div con todo su contenido en el mismo.

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

    } 

Answer 10

sé que este tema es bastante viejo, pero quiero compartir mi experiencia sobre ese tema. En realidad, estaba buscando un módulo que me puede ayudar 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 compartirlos con amigos, ... En lugar de buscar, decidí tener una pequeña sesión de codificación divertida para implementar una lib simple que puede manejar "páginas", número de página, resumen, encabezado , pie de página, .... Finalmente, lo hice en ~~ 2h y sé que esa no es la mejor herramienta, pero está casi bien para mi propósito. Puede echar un vistazo a este proyecto en mi repositorio y no dude en compartir sus ideas. Quizás no es lo que estás buscando al 100%, pero creo que este módulo puede ayudarte.

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

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

Answer 11

tamaño A4 es 210x297mm

para que pueda configurar la página HTML para adaptarse a los tamaños con CSS:

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

Answer 12

vi esta solución después de buscar en Google, buscar "página CSS A4 plantilla "(codepen.io). Muestra un área de tamaño A4 (A3, A5, también vertical) en el navegador, usando la etiqueta < >. 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 ningún otro css/js-biblioteca para ser incluidos. Funciona para los navegadores actuales (IE, FF, Chrome).

Answer 13

He usado 680px en informes comerciales para imprimir en páginas A4 desde 1998. Los 700px no caben correctamente según el tamaño de los márgenes. Los navegadores modernos pueden reducir la página para ajustarse a la página en la impresora, pero si usa 680 píxeles, imprimirá correctamente en casi todos los navegadores.

Eso es HTML para que código Ejecutar snippet y ver de 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 14

muchas maneras de hacerlo:

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


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

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