style - ¿Cómo hacer que las páginas HTML se impriman en un tamaño consistente desde Chrome?

meta keywords ejemplos

Question

Estoy diseñando un conjunto de páginas HTML para imprimir, y quiero que los elementos de las páginas terminen en la misma escala entre sí. Por ejemplo, hay una clase de div cuyo ancho se define como 200px de ancho aparece en cada una de varias páginas. Quiero que aparezca exactamente del mismo tamaño cuando se imprime cada página (adecuado para, por ejemplo, recortar y superponer).

Estoy usando algunas cosas que funcionan mejor en Chrome (principalmente la regla de zoom CSS para tener copias más pequeñas de elementos en otro lugar), así que lo ideal sería seguir usando Chrome. (Esto sería más fácil en Firefox, porque tiene una relación de escala explícita en el diálogo de impresión). Pero parece que en Chrome, mantener el mismo elemento en un tamaño consistente cuando se imprime desde diferentes páginas no es nada fácil.

La generación de PDF de Chrome (que es lo que hace la impresión desde Chrome debajo del capó) parece seleccionar alguna sección para definir el ancho de la página y escalar el resto de la página en función de eso. O tal vez intenta establecer el tamaño de la página para que se ajuste a un número "óptimo" de elementos en una página. Si los elementos de encuadre exterior de cada página no tienen el mismo tamaño en todos los casos, entonces parece que los elementos con un tamaño de pantalla de 200 px pueden salir desde 3-4 cm hasta 1,5-2cm o incluso más pequeños.

El solo uso del @page size no ayuda: tengo este CSS y no hace ninguna diferencia:

@media print {
@ page size: 297mm 210mm
}

¿Alguien tiene alguna idea sobre cómo hacer que las cosas se impriman con tamaños consistentes?

Una solución extrema que podría aplicar es convertirlas en todas las partes de una gran página HTML, y usar Javascript para marcar ciertas partes como las únicas partes que se imprimirán ... Ni siquiera estoy seguro de si eso funcionaría, y es así. Estaré más limpio para agilizar las cosas en unas pocas páginas diferentes. Entonces, ¿hay otras ideas?

Answer 1

Permite diferentes tamaños, pero controla los márgenes y el diseño de cada tamaño.

Cuando respondí por primera vez, estaba usando Chrome 32.0.1700.107 m

El estándar W3 CSS3 establecido para los tamaños de página funciona muy bien con la opción "GUARDAR COMO PDF" directamente desde el complemento de Chrome en la interfaz de impresión.

He tenido años de problemas con diferentes interfaces y soluciones para diferentes proyectos (por ejemplo: generar archivos PDF directamente desde el servidor que era demasiado pesado en el procesamiento y desordenado en el código, o decirle a los usuarios que usen la interfaz de impresión de Windows, etc.). ¡Esta es una gran solución para mí y parece ser definitiva!

Este es un ejemplo perfecto de la misma página, con opciones para márgenes de impresión de tamaño A4 y Carta:

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
@page {
margin: 1in;
}
}

Puede replicar tantas veces como desee utilizando diferentes tamaños de papel. Los valores adicionales (colores, elementos ocultos, etc.) irían fuera de la página @.

Answer 2

Además, si el tamaño del papel es A4 y protrait también puede usar este

@page {
size: A4 landscape;
}

Esto funciona en Chrome.

Answer 3

Encontré una solución. La clave es garantizar que en cada documento, la "página lógica" en la que Chrome divide los elementos para imprimir sea del mismo tamaño. Por ejemplo, si un documento tiene muchos cuadrados de 200x200px y Chrome decide agruparlos en un rectángulo de 5x4 para imprimir en horizontal, entonces debe asegurarse de que Chrome imprimirá cada otro documento consistente dividido en elementos de tamaño 1000x800px.

Para los documentos que son simplemente una serie de divisiones o divs de bloque en línea en secuencia, basta con tener una div configurada exactamente a su ancho elegido (1100px), y asegurarse de que esa div ocupa el ancho completo de la página en la vista previa de impresión. Luego solo asegúrate de que tu CSS contenga algo como:

@media print {
@page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}

Si esto no es suficiente, colocar todo dentro de uno o más divs con tamaño fijo ( width: 1100px; height: 800px; overflow: hidden; ) hace el trabajo, como una forma de forzar a Chrome a dividirse en las páginas que desea ( y por lo tanto mantener los elementos del mismo tamaño cuando se imprimen).

Answer 4

Sus consultas de medios at-rules están estructuradas incorrectamente. tratar:

@media print {
@page {
size:297mm 210mm;
}
}

que al menos proporciona la sintaxis correcta. en cuanto a la propiedad de size , se eliminó de css2.1 y el soporte del navegador varía. Siempre se puede establecer el width , margin y / o padding