html imprimir una página muy amplia en varias hojas A4

Question

Tengo una página con un gráfico horizontal ancho (digamos alrededor de 3000px) que normalmente se puede desplazar.

En la versión de impresión represento todo el gráfico, (en realidad tengo un código JA/HTML para la versión de impresión), por lo que se necesitan anchos A4 (paisaje) en la pantalla.

En esta situación, veo que el navegador (FF3 en este caso) no me permite imprimir la página ancha en varias hojas de papel (según la vista previa de impresión).

Parece que la única forma de imprimir todo el documento es hacer que el usuario configure el nivel de zoom en 30%, y luego todo el gráfico se ajusta en una sola A4.

Me falta un poco de directiva CSS allí, pero no pude buscarla en Google en ninguna parte.

Apreciaremos las ideas/punteros.

Gracias.

Answer 1

HTML Impresión a través de múltiples páginas como ésta no es una cosa agradable a tener que hacer

Es posible que desee romper el gráfico hacia arriba en la página trozos del tamaño (por ejemplo, un div para cada página) por lo que cuando se hacen flotar junto el otro se ve como se requiere. Luego use CSS page-break-before o page-break-after para asegurarse de que las páginas impresas se dividan correctamente y no pierda ningún contenido del costado de la página.

También asegúrese de tener el tipo media para imprimir el css que utiliza para la versión imprimible.

Answer 2

No se puede controlar cómo HTML se imprime de manera real: HTML/CSS/JS no tiene acceso a la configuración del controlador de impresión o de impresión del navegador. La única opción es convertir la salida imprimible a PDF (o algún otro formato centrado en la impresión) y, en su lugar, publicarla.

Answer 3

Puede agregar una transformación de rotación a la hoja de estilo de impresión. Una solución parcial como una larga mesa ahora será demasiado amplia ...

.rotated-when-printed { 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    filter:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123233995736766e-17,M12=-1,M21=1,M22=6.123233995736766e-17) 
} 

<!-- some very wide table --> 
<table class="rotated-when-printed"> 
    ... 
</table> 

Answer 4

(se ha suprimido una respuesta anterior de la mina a esta pregunta, no sé por qué: lo intento de nuevo)

tiempo largo Busqué una solución basada en CSS sobre este problema, y ​​creo que no es posible tener saltos de página verticales de tablas HTML a través de CSS (al menos no saltos de página en datos tabulares en una etiqueta HTML TABLE, pero debería ser posible con datos tabulares organizado en DIVs).

Creo que la única solución es permitir que javascript realice la división. Cuando se carga la página, javascript puede verificar si la tabla es más ancha que el ancho de página deseado: en ese caso es posible crear dinámicamente una nueva tabla y duplicar solo las columnas que están fuera del ancho permitido y eliminarlas del original mesa. Todo el proceso es un poco complicado, pero los resultados son satisfactorios.

También es posible dejar que el código JavaScript se ejecute solo para imprimir y no para la tabla mostrada en la pantalla: un botón de impresión en la página puede organizarse para ejecutar un código de servidor, por ejemplo php, que puede generar un pdf pensó en la biblioteca wkhtmltopdf, pasando a la página html donde está la tabla, incluyendo el código javascript. De hecho, wkhtmltopdf genera un pdf que simula un navegador, y el código javasript se ejecutará correctamente.

Ahora, esta biblioteca javascrpt ya existe, la escribí y funciona muy bien (al menos para mis necesidades), y está disponible gratuitamente en Internet: no quiero vincularla porque ya se ha eliminado una respuesta anterior, y no sé si fue por esa razón. Pero si alguien está interesado, puede preguntar en comentarios y lo daré.