Foros del Web » Creando para Internet » HTML »

Documento que ocupe toda la hoja con Header y Footer

Estas en el tema de Documento que ocupe toda la hoja con Header y Footer en el foro de HTML en Foros del Web. Hola Amigos Tengo una plantilla (con un Header y un Footer) que me genera un archivo PDF para expedir facturas. En la parte de los ...
  #1 (permalink)  
Antiguo 15/03/2011, 10:10
Avatar de roby77  
Fecha de Ingreso: marzo-2011
Mensajes: 10
Antigüedad: 13 años, 1 mes
Puntos: 0
De acuerdo Documento que ocupe toda la hoja con Header y Footer

Hola Amigos

Tengo una plantilla (con un Header y un Footer) que me genera un archivo PDF para expedir facturas. En la parte de los productos, esta actua dinámicamente dependiendo de los productos facturados, es decir, si es 1 producto ocupa menos espacio en hoja que si fueran 10 productos. y luego de estampar los productos viene el Footer con los totales de la factura.

Mi problema es que si se factura 1 producto, luego de este viene el footer y se corta la factura, por lo que dependiendo de la descripción, ocupa media hoja o a veces menos y pues el resto sale blanco.

Lo que deseo es que ese espacio en blanco pueda quedar entre el footer y la descripcion de los productos y de esta manera la factura ocupe siempre una hoja.

He pensado en dejarla como la tengo, pero dibujar el Footer de abajo hacia arriba, es decir, paoso1: estampar Header, paso2: estampar productos y paso3: indicar al sistema el fin de la hoja (de alguna manera que no sabría cuál sería) y restarle lo que mide le footer para que de ahí en adelante lo estampe, teniendo como resultado que siempre me lo coloque al final de la hoja.


Si hay una manera mas óptima de hacerlo (bueno CUALQUIER forma de hacerlo), les agradecería mucho me la informaran. He buscado en los foros, pero no he encontrado información clara.

Esta es mi plantilla:

<title>Factura</title>
<style type="text/css">
<!--


#apDiv0001 {
position:absolute;
left:2px;
top:14px;
width:99px;
height:58px;
}
.tabla {
background-color: #0099CC;
font-family:Verdana, Geneva, sans-serif;
font-size:11px
}

.tabla2 {
border-right-color:#000;
border:thin;
font-family:Verdana, Geneva, sans-serif;
font-size:11px
}

#cap0{
position:absolute;
left:616px;
top:77px;
width:101px;
height:20px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
z-index:1;
}
#cap1{
position:absolute;
left:101px;
top:164px;
width:554px;
height:20px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap2{
position:absolute;
left:101px;
top:186px;
width:101px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap3{
position:absolute;
left:101px;
top:209px;
width:554px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap4{
position:absolute;
left:663px;
top:166px;
width:101px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap5{
position:absolute;
left:663px;
top:186px;
width:101px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap6{
position:absolute;
left:679px;
top:210px;
width:101px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap7{
position:absolute;
left:131px;
top:258px;
width:170px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap8{
position:absolute;
left:454px;
top:270px;
width:262px;
height:66px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap9{
position:absolute;
left:611px;
top:138px;
width:172px;
height:20px;
color:#ff0000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap10{
position:absolute;
left:74px;
top:280px;
width:170px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap11{
position:absolute;
left:109px;
top:304px;
width:170px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap12{
position:absolute;
left:101px;
top:232px;
width:170px;
height:15px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:1;
}
#cap13{
position:absolute;
left:81px;
top:128px;
width:649px;
height:71px;
color:#000000;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
z-index:5;
}


-->
</style>
</head>
<body>
<div id="apDiv0001"><img src="../../../../images/uploads/Header.png" width="100%" height="100%"/></div>
<div id="cap0">%numero%</div>
<div id="cap1"><font color=black>%razonsocial% %primernombre% %demasnombres% %primerapellido% %segundoapellido%</div>
<div id="cap2">%nit%</div>
<div id="cap3">%direccion%</div>
<div id="cap4">%telefono%</div>
<div id="cap5">%ciudadcliente%</div>
<div id="cap6">%departamento%</div>
<div id="cap7">%fechatsa%</div>
<div id="cap8">%resolucion%</div>
<div id="cap9">%tipoimpresion%</div>
<div id="cap10">%nombremoneda%</div>
<div id="cap11">%trm%</div>
<div id="cap12">%contacto%</div>

<br><br>

<div style="background:url(../../../../images/uploads/image.jpg) center no-repeat">

<p>%descripcion%</p>

</div>
<BR>
<div style="background:url(../../../../images/uploads/Footer.png) top no-repeat ; page-break-after:always">
<table width="100%" border="0"><br><br><br><br><br><br>
<tr>
<td colspan="4" rowspan="4" valign="top" nowrap="nowrap" class="valess2"><br /><br /><br />
<font color="#FFFFFF"> ....</font><font size="-1">%dianctc%</font>&nbsp;</td>
<td width="76" height="21" rowspan="2">&nbsp; </td>
<td width="78">&nbsp;</td>
</tr>
<tr>
<td><font size="-1">%baseiva%</font></td>
</tr>
<tr>
<td height="21">&nbsp;</td>
<td height="21"><font size="-1">%totaliva%</font></td>
</tr>
<tr>
<td height="21">&nbsp;</td>
<td height="21" align="char"><font size="-1">%total%</font></td>
</tr>
<tr>
<td width="90" rowspan="3" align="left" valign="bottom">&nbsp;</td>
<td colspan="3" rowspan="3"></td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="20" colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
<div id="cap13" style="padding:5px"><font size="-1">%comentarios%</font></div>
</div>



Gracias,
  #2 (permalink)  
Antiguo 15/03/2011, 10:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Documento que ocupe toda la hoja con Header y Footer

Deberá utilizar una hoja de estilos para impresión y llamarla en el header con el media="print".
En ese css declarar las propiedades correspondientes a @page (orientación, tamaños, mágenes...)
Quizás en su caso lo correcto sería presentar los datos en un tabla, con su thead, tbody y tfood y éste último declarado con "position: absolute; bottom: 0; left: 0;"
  #3 (permalink)  
Antiguo 16/03/2011, 07:24
Avatar de roby77  
Fecha de Ingreso: marzo-2011
Mensajes: 10
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Documento que ocupe toda la hoja con Header y Footer

Gracias Kseso...voy a probar y te cuento.
  #4 (permalink)  
Antiguo 16/03/2011, 07:37
Avatar de zarcorian  
Fecha de Ingreso: marzo-2011
Ubicación: aquí
Mensajes: 113
Antigüedad: 13 años, 1 mes
Puntos: 3
Respuesta: Documento que ocupe toda la hoja con Header y Footer

Si usas la propiedad "min-height"... por ejemplo:

min-height: 600px;

dentro de las etiquetas html o body, podras especificar una altura mínima de pagina. En este caso que te he escrito seria de 600px.

un saludo,
  #5 (permalink)  
Antiguo 16/03/2011, 10:29
Avatar de roby77  
Fecha de Ingreso: marzo-2011
Mensajes: 10
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Documento que ocupe toda la hoja con Header y Footer

Estoy probando con los tags thead, tfoot y tbody, cometiendo el error garrafal de colocar el tbody antes del tfoot (esto lo coloco para que no le vuelva a pasar a nadie). Voy a cambiar la estructura y les cuento como me fué.
  #6 (permalink)  
Antiguo 16/03/2011, 11:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Documento que ocupe toda la hoja con Header y Footer

@zarcorian
No se deben utilizar px como medida de tamaños para media="print", esto es, para salida por impresora.

@roby77
En una pruebas muy rápidas que hice antes de sugerirle lo de #2, el tfoot posicionado con valor absolute se va a la parte inferior de la página (en vista previa de impresión, que no lo imprimí).
Lo que no hice fue forzar a que el tbody tuviese ocupase más de una hoja (folio de papel). Pero creo que se debería comportar igual.
  #7 (permalink)  
Antiguo 16/03/2011, 15:17
Avatar de zarcorian  
Fecha de Ingreso: marzo-2011
Ubicación: aquí
Mensajes: 113
Antigüedad: 13 años, 1 mes
Puntos: 3
Respuesta: Documento que ocupe toda la hoja con Header y Footer

Cita:
Iniciado por kseso? Ver Mensaje
@zarcorian
No se deben utilizar px como medida de tamaños para media="print", esto es, para salida por impresora.
Ok, tomo nota !!!

saludos,
  #8 (permalink)  
Antiguo 17/03/2011, 09:00
Avatar de roby77  
Fecha de Ingreso: marzo-2011
Mensajes: 10
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Documento que ocupe toda la hoja con Header y Footer

Nada Muchachos

Según me cuentan tendría que hacer esto desde el "DOMPDF" que es la librería que me renderiza los PDF.

Si alquien maneja bien esta librería le agradecería un manito.


Etiquetas: documento, footer, header, hoja
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:42.