0
293
Vistasalinear tablas verticalmente cuando se imprime la página html
Tengo dos tablas de tamaño 7 cm × 15 cm que quiero exportar a un archivo pdf , de tamaño de papel vertical A4, usando la opción "Guardar en PDF" del navegador en su herramienta de impresión.
Idealmente, quiero centrar verticalmente las dos tablas en el papel A4. Pero si eso no es posible, me gustaría que se colocaran en el mismo lugar de la página.
Por el momento, por alguna razón, las dos tablas no están colocadas en el lugar exacto de la página, como yo quiero (ver en la imagen de abajo).
El código html es el siguiente:
<body> <!-- 1st table: --> <table> <tr> <td>content of the first table</td> <!-- some other tr's and td's --> </tr> </table> <!-- 2nd table: --> <table> <tr> <td>content of the second table</td> <!-- some other tr's and td's --> </tr> </table> </body>junto con las siguientes reglas css:
table {width:7cm; height:15cm; border: 1px solid; page-break-after: always; margin: auto; } @media print { @page { size: A4 portrait; } } El page-break-after: always; la regla indica al navegador que inserte un salto de página después de la tabla;
El margin: auto; regla alinea horizontalmente las tablas en el lienzo.
Necesito imprimir las dos tablas en el mismo papel, en una impresión a dos caras, para que las tablas se impriman una detrás de la otra.
Lo que tengo en este momento:
¡Cualquier ayuda sería muy apreciada!
3 Respuestas
Responde la pregunta0
Así que encontré la solución sin javascript. Cambie sus medios para imprimir a esto:
@media print { body {margin-top:0 !important;} @page { size: A4 portrait; } } Editar para centrar las tablas:
Tienes que envolver las tablas en un div como este:
<body> <!-- 1st table: --> <div class="page"> <table> <tr> <td>content of the first table</td> <!-- some other tr's and td's --> </tr> </table> </div> <!-- 2nd table: --> <div class="page"> <table> <tr> <td>content of the second table</td> <!-- some other tr's and td's --> </tr> </table> </div> </body>Luego, en el css, agregue esto para la visualización flexible:
@media print { body {margin-top:0 !important;} .page{ height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; } @page { size: A4 portrait; } }Y debe estar centrado y todo ahora.
0
[ Consejos ]:
@tush, podemos hacer lo que mencionaste en los comentarios. Dado que se conoce la altura Y se conoce la altura del contenedor (cuerpo), entonces podemos arreglarlos posicionándolo "manualmente".
margin: 6cm auto; . Mira la muestra a continuación.
[ Resultado ]:
[ Código HTML/CSS ]:
table {width:7cm; height:15cm; border: 1px solid; page-break-after: always; margin: 6cm auto; } @media print { @page { size: A4 portrait; } } <body> <!-- 1st table: --> <table> <tr> <td>content of the first table</td> <!-- some other tr's and td's --> </tr> </table> <!-- 2nd table: --> <table> <tr> <td>content of the second table</td> <!-- some other tr's and td's --> </tr> </table> </body>0
Aquí hay quizás una posible solución. He usado su HTML y CSS exacto proporcionado, con la simple adición de un truco de transform que asegura el centrado perfecto de los objetos:
<html><head> <title>Two Centered Tables</title> <style> table { width: 7cm; height: 15cm; border: 1px solid; page-break-after: always; margin: 50%; transform: translate(-50%, -50%); text-align: center; } @media print { @page { size: A4 portrait; } } </style> </head> <body> <!-- 1st table: --> <table> <tbody> <tr> <td>content of the first table</td> <!-- some other tr's and td's --> </tr> </tbody> </table> <!-- 2nd table: --> <table> <tbody> <tr> <td>content of the second table</td> <!-- some other tr's and td's --> </tr> </tbody> </table> </body></html>Mostrado a través de Chrome DevTools
Simplemente usando ctrl/cmd-P para abrir el diálogo de impresión.
Aquí, he seleccionado 2 páginas por hoja solo con fines ilustrativos para mostrar la alineación perfecta. Cuando realiza su impresión, por supuesto, esto se establecerá en una página por hoja (el valor predeterminado). Márgenes establecidos en ninguno (aunque automático también funcionará bien); y gráficos de fondo y encabezado no seleccionados.
<!DOCTYPE html> <html> <head> <title>Two Centered Tables</title> <style> table { width: 7cm; height: 15cm; border: 1px solid; page-break-after: always; margin: 50% 50% 50% 50%; transform: translate(-50%, -50%); text-align: center; } @media print { @page { size: A4 portrait; } } </style> </head> <body> <div style="display: grid;"> <!-- 1st table: --> <table> <tbody> <tr> <td>content of the first table</td> <!-- some other tr's and td's --> </tr> </tbody> </table> <!-- 2nd table: --> <table> <tbody> <tr> <td>content of the second table</td> <!-- some other tr's and td's --> </tr> </tbody> </table> </div> </body> </html> Intente ejecutar este fragmento, vaya a pantalla completa (después de ejecutar el fragmento → "Página completa" ( no "Extender fragmento"), luego imprima así: 
Nuevamente, solo como verificación de cordura (mostrando 2 por página para verificar la alineación): 
Puede ser debido a la codificación en centímetros, que cuando ejecutó este código no funcionó para usted; y, por lo tanto, depende del tamaño real de su monitor que obtiene (si codifica el ancho y la altura en unidades de cm [¿o píxeles?]?). ¿Alguien puede arrojar luz sobre eso?