Cómo evitar que parte de la segunda columna DomPdf pase a la segunda página
Publicado por Gabriela (2 intervenciones) el 04/09/2023 02:33:31
Hola. Estoy comenzando en esto del desarrollo web.
Debo generar un Pdf que servirá para completar un comprobante genérico impreso.
El texto a imprimir se encuentra dividido en dos columnas de idéntico contenido.
Tomé un modelo de css y lo adapté. El problema es que la primer columna se muestra bien y la segunda, en cambio, se muestra cortada, y parte de la segunda columna se muestra en una segunda página.
Este es el css
Este es el html:
Este es el resultado que estoy obteniendo.
Necesito que se imprima en una sola página.
Desde ya, agradezco todo tipo de ayuda y el tiempo que se tomaron en leer esta pregunta
Debo generar un Pdf que servirá para completar un comprobante genérico impreso.
El texto a imprimir se encuentra dividido en dos columnas de idéntico contenido.
Tomé un modelo de css y lo adapté. El problema es que la primer columna se muestra bien y la segunda, en cambio, se muestra cortada, y parte de la segunda columna se muestra en una segunda página.
Este es el css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style type="text/css">
@page {margin-left: 1cm;
margin-right: 1cm;
margin-top: 0.8cm;
margin-bottom: 0.1cm;
}* { box-sizing: border-box;
}body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.header {
padding-left: 30px;
padding-right: 5px;
text-align: center;
height: 196.54px;
}.panelIzquierdo {
float: left;width: 49%;
padding: 10px;text-align: center;
}.panelDerecho {
float: right;width: 51%;
padding: 10px;text-align: center;
height: 145px;}.row:after {
content: "";
display: table; clear: both;}@media {.column {
width: 100%;
}}</style>
Este es el html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div class="header">
<br><br><br><br>
<table width="100%" >
<tr>
<td width="300px" style="padding-left: 80px;"> Apellido Nombre Segundo </td>
<td align="center" > 000000 </td>
</tr>
<tr>
<td colspan="2"><br></td>
</tr>
<tr>
<td width="20px" colspan="2" style="padding-left: 300px; padding-top: 12px;">Cobrador </td>
</tr>
<tr>
<td width="20px" colspan="2" style="padding-left: 270px; padding-top: 17px;">2023 </td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="row">
<div class="panelIzquierdo" >
<table width="100%" border="0">
<br>
<tr>
<td colspan="2" style="padding-left: 25px; padding-top: 4px;">Nombre</td>
</tr>
<tr>
<td align="left" style="padding-left: 20px; padding-top: 5px;">000000</td>
<td align="left" style="padding-left: 23px; padding-top: 12px;"><2023</td>
</tr>
<tr>
<td align="left" style="padding-top: 12px;" rowspan="2">0000,00.-</td>
<td align="left" style="padding-top: 5px; padding-left: 10px;">dd/mm</td>
</tr>
</table>
</div>
<div class="panelDerecho" >
<table width="100%" border="0">
<br>
<tr>
<td colspan="2" style="padding-left: 80px; padding-top: 4px;">Nombre</td>
</tr>
<tr>
<td align="left" style="padding-left: 75px; padding-top: 8px;">000000</td>
<td align="left" style="padding-left: 70px; padding-top: 12px;"><2023</td>
</tr>
<tr>
<td align="left" style="padding-top: 12px; padding-left: 50px;" rowspan="2">0000,00.-</td>
<td align="left" style="padding-top: 5px; padding-left: 70px;">dd/mm</td>
</tr>
</table>
</div>
</div>
<br>
<div class="row">
<div class="panelIzquierdo" >
<table width="100%" border="0">
<br>
<tr>
<td colspan="2" style="padding-left: 25px; padding-top: 4px;">Nombre</td>
</tr>
<tr>
<td align="left" style="padding-left: 20px; padding-top: 5px;">000000</td>
<td align="left" style="padding-left: 23px; padding-top: 12px;"><2023</td>
</tr>
<tr>
<td align="left" style="padding-top: 12px;" rowspan="2">0000,00.-</td>
<td align="left" style="padding-top: 5px; padding-left: 10px;">dd/mm</td>
</tr>
</table>
</div>
<div class="panelDerecho" >
<table width="100%" border="0">
<br>
<tr>
<td colspan="2" style="padding-left: 80px; padding-top: 4px;">Nombre</td>
</tr>
<tr>
<td align="left" style="padding-left: 75px; padding-top: 8px;">000000</td>
<td align="left" style="padding-left: 70px; padding-top: 12px;"><2023</td>
</tr>
<tr>
<td align="left" style="padding-top: 12px; padding-left: 50px;" rowspan="2">0000,00.-</td>
<td align="left" style="padding-top: 5px; padding-left: 70px;">dd/mm</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="panelIzquierdo" >
<table width="100%" border="0">
<br>
<tr>
<td colspan="2" style="padding-left: 25px; padding-top: 4px;">Nombre</td>
</tr>
<tr>
<td align="left" style="padding-left: 20px; padding-top: 5px;">000000</td>
<td align="left" style="padding-left: 23px; padding-top: 12px;"><2023</td>
</tr>
<tr>
<td align="left" style="padding-top: 12px;" rowspan="2">0000,00.-</td>
<td align="left" style="padding-top: 5px; padding-left: 10px;">dd/mm</td>
</tr>
</table>
</div>
<div class="panelDerecho" >
<table width="100%" border="0">
<br>
<tr>
<td colspan="2" style="padding-left: 80px; padding-top: 4px;">Nombre</td>
</tr>
<tr>
<td align="left" style="padding-left: 75px; padding-top: 8px;">000000</td>
<td align="left" style="padding-left: 70px; padding-top: 12px;"><2023</td>
</tr>
<tr>
<td align="left" style="padding-top: 12px; padding-left: 50px;" rowspan="2">0000,00.-</td>
<td align="left" style="padding-top: 5px; padding-left: 70px;">dd/mm</td>
</tr>
</table>
</div>
</div>
Este es el resultado que estoy obteniendo.
Necesito que se imprima en una sola página.
Desde ya, agradezco todo tipo de ayuda y el tiempo que se tomaron en leer esta pregunta
Valora esta pregunta
0