Imprimir listado con encabezado en cada hojaA4

SirDuque · #1 (**permalink**) 14/12/2011, 15:17

Hola chicos, estoy haciendo un sistema de gestion en PHP.
Y en algunas consulta los resultados son muchos.

Para que se den una idea listo todas las compras de un cliente, y este me da 300 filas( <tr> ) de una etiqueta <table></table>

Me gustaria saber cuando corta la hoja, para que incluya un encabezado en todas las hojas y la numeracion de estas.

Espero ser claro con mi problema.

emprear · #2 (**permalink**) 14/12/2011, 16:11

No creo que puedas, podés forzar un salto de pagina con css page-break, en ese caso, lo harías tras un número limitado de registros asegurándote de que esa cantidad entra por ejemplo en un A4 (incluyendo el header).pero no saber en que momento va a hacer el salto, ni que tamaño de papel se está usando. Además el usuario puede establecer variables en la configuración de impresión que incluyan otros elementos, url, nº de p´´agina, ttitulo de la pag. etc.

SAludos

SirDuque · #3 (**permalink**) 14/12/2011, 16:16

Cita:

Iniciado por emprear

No creo que puedas, podés forzar un salto de pagina con css page-break, en ese caso, lo harías tras un número limitado de registros asegurándote de que esa cantidad entra por ejemplo en un A4 (incluyendo el header).pero no saber en que momento va a hacer el salto, ni que tamaño de papel se está usando. Además el usuario puede establecer variables en la configuración de impresión que incluyan otros elementos, url, nº de p´´agina, ttitulo de la pag. etc.

SAludos

Gracias emprear voy a informarme de page-break y voy a manipularlo en PHP para saber cuando escribirlo.

kseso? · #4 (**permalink**) 15/12/2011, 08:50

Creo recordar (no tengo a mano la documentación oficial) que lo podría lograr con position: fixed
La repetición en todas lad páginas a imprimir.

SirDuque · #5 (**permalink**) 18/12/2011, 11:22

Cita:

Iniciado por kseso?

Creo recordar (no tengo a mano la documentación oficial) que lo podría lograr con position: fixed
La repetición en todas lad páginas a imprimir.

Si! position:fixed, pone como cabezera el div elegido en todas las paginas, pero cuando subis y bajas el scroll lo mueve por toda la pantalla.
Tengo que trabajar sobre eso, me va a costar ya que no se nada de CSS.

Ademas encontre estos articulos como referencia al tema CSS para imprimir:

http://www.desarrolloweb.com/articul...agina-web.html

http://www.desarrolloweb.com/articul...ak-before.html

kseso? · #6 (**permalink**) 18/12/2011, 17:23

No entiendo su referencia a la pantalla (ventana) si estamos hablando de impresión.
A no ser que haya obviado lo básico. Separar los estilos según el medio y aplicarlos selectivamente con el uso del "media=..."

SirDuque · #7 (**permalink**) 19/12/2011, 15:37

Cita:

Iniciado por kseso?

No entiendo su referencia a la pantalla (ventana) si estamos hablando de impresión.
A no ser que haya obviado lo básico. Separar los estilos según el medio y aplicarlos selectivamente con el uso del "media=..."

Claro Kseso? a eso me referia, con respecto a lo basico, estoy recien inciado en CSS con este tema xD!

Ya estoy jugando con "media=...."

emprear · #8 (**permalink**) 19/12/2011, 16:57

Estuve haciendo unas pruebas y solo conseguí un resultado aceptable en Firefox, te lo dejo como ejemplo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="p.css" media="print" />
<link rel="stylesheet" type="text/css" href="s.css" media="screen" />
</head>
<body>
    <div class="hprint">
        <h1>Header de impresión</h1>
    </div>
<table id="tabla" border="1">
<tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr>
<!-- insertar mas  filas aquí -->
</table>
 
    <div class="fprint">
        <h1>footer de impresión</h1>
    </div>
</body>
</html>

s.css

Código CSS:

Ver originaldiv.hprint, div.fprint{
display: none;
}

p.css

Código CSS:

Ver originaldiv.hprint {
position: fixed;
height: 120px;
display:block;
}
div.fprint {
position: fixed;
height: 120px;
margin-top: 120px;
display:block;
bottom: 0;
left: 0;
}
table {
margin-top: 120px;
margin-bottom: 120px;
}

Estuve buscando, pero no encontré ninguna solución definitiva que se pueda drealizar a través de Css solamente.

Saludos

SirDuque · #9 (**permalink**) 19/12/2011, 17:48

Lo manipule un poco, ustedes corrigiran el CSS, ya que soy muy novato... pero logre esto:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="p.css" media="print" />
<link rel="stylesheet" type="text/css" href="s.css" media="screen" />
</head>
<body>
    <div class="hprint">
        <h1>Header de impresión</h1>
    </div>
<table id="tabla" border="1" class="tabla">
<tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr>
<!-- insertar mas  filas aquí -->
<tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr><tr>
<td>
celda 1 fila 1 <p>parrafo</p>
</td>
<td>
celda 2 fila 1
</td>
<td>
celda 3 fila 1
</td>
</tr>
<tr>
<td>
celda 1 fila 2
</td>
<td>
celda 2 fila 2
</td>
<td>
celda 3 fila 2
</td>
</tr>
</table>
 
    <div class="fprint">
        <h1>footer de impresión</h1>
    </div>
</body>
</html>

s.css

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
div.fprint{
display: none;
}
div.hprint{
display:block;
    border:double; 
}
.tabla{
    width:100%;
    border:#000000; 
    border:double;
    top:50px; 
    position:relative;
    page-break-after:auto;
}

p.css

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
div.hprint {
position: fixed;
height: 120px;
display:block;
}
div.fprint {
position: fixed;
height: 120px;
margin-top: 120px;
display:block;
bottom: 0;
left: 0;
}
.tabla{
    width:100%;
    border:#000000; 
    border:double;
    top:100px;
    position:relative;
    page-break-after:auto;
}

Funciona bien en IE y Firefox

Lo que no queda bien es el footer

kseso? · #10 (**permalink**) 20/12/2011, 07:46

Cita:

Iniciado por SirDuque

Claro Kseso? a eso me referia, con respecto a lo basico, estoy recien inciado en CSS con este tema xD!

Ya estoy jugando con "media=...."

Mis disculpas entonces. Di por sentado que tenía una base.

Vayamos a lo básico, pues.
Tenga a mano las especificaciones relativas a los medios paginados.

Aplicando estilos:
Lo primero hay que definir la regla @page que es el tamaño de la página.
A continuación, y visto que vamos a tener 2 elementos que se repiten, hay que posicionarlos y darle un tamaño.
Y a continuación su tabla, que tendrá que dejar un espacio tanto antes como después de ella para evitar solapamientos.
La recomendación en media= print es utilizar unidades de medidas propias de un medio físico. Aquí no valen px u otras por el estilo. Mejor en mm o cm.

Mire lo siguiente a ver si le sirve como base/ejemplo:

Código CSS:

Ver original@page {
  size: 210mm 197mm;
}
.hprint {
position: fixed;
height: 15mm;
top: 0;
left:0;
font-family: serif;
}
.fprint {
position: fixed;
height: 15mm;
bottom: 0;
left: 0;
font-family: sans-serif;
}
.tabla{
    width:100%;
    border:#000000; 
    border:double;
    margin-top: 18mm;
    margin-bottom: 18mm;
    position:relative;
    page-break-after:auto;
    font-family: monospace;
}

No he podido verlo más que en ff.

SirDuque · #11 (**permalink**) 21/12/2011, 07:45

Kseso? No importa a mi me pasa lo mismo en PHP.

Te muestro como sale impreso segun el codigo que pusiste.

Modifique esto:

Código CSS:

Ver original.tabla{
    top:20mm;
    bottom: 20mm; /*No afecta^*/
    width:100%;
    border:#000000; 
    border:double;
/*  margin-top: 20mm;
    margin-bottom: 20mm;*/
    position:relative;
    page-break-after:auto;
    font-family: monospace;
}

Y el resultado es el siguiente:

Como la tabla no corta, me parece que el footer es medio complicado.

EDIT:

Aunque ahora que presto atencion.

En la hoja 2 [ celda 3 fila 1] no aparece.

kseso? · #12 (**permalink**) 23/12/2011, 14:58

Retomemos con un copy&paste del enlace que le compartí en #10:

Cita:

13.3.6 Los "mejores" saltos de página

CSS2 no define cuál de todos el conjunto de saltos de página permitidos debe usarse; CSS2 no prohibe que la aplicación del usuario realice el salto en cada posible punto de corte, o que no lo haga en absoluto. Pero CSS2 recomienda que las aplicaciones del usuario observen las siguientes reglas heurísticas (en tanto reconoce que estas son a veces contradictorias):

Producir los menores cortes posibles.
Hacer que todas las páginas que no terminan con cortes forzados parezcan tener aproximadamente la misma altura.
Evitar el corte dentro un bloque que tiene un borde.
Evitar el corte dentro de una tabla.
Evitar el corte dentro de un elemento flotante.

Así que tras esa advertencia, ¿qué tal si ayuda al css con algo de programación?
Genere una tabla nueva cada X filas. Esto es, vía php cierre la tabla cada X filas y cree una nueva para los siguientes.
De tal manera que el número de filas (la suma de sus alturas) sea inferior al espacio que que le quede deje libre en el a4 el la cabecera y el pie.
Claro que esto sólo será prosible si la información de cada celda es homogénea. Esto es, que ocupen el mismo nº de líneas horizontales.

SirDuque · #13 (**permalink**) 23/12/2011, 17:26

En ese caso, en ves de cerrar y abrir la tabla utilizaria page-break como nuestro amigo emprear, despues antes de continuar, ingresar un <tr></tr> con encabezados de la columna.

Aunque al ser todo generado por PHP y ser todas variantes, no puedo controlar el tamaño de las filas o del encabezado.

Voy intentar con un hoja CSS toda en cm y no px como sugirieron.

wapton · #14 (**permalink**) 19/06/2012, 10:58

Si funciona tu codigo css en firefox aca te dejo el codigo
gracias por tu aporte XD

solo necesitas agregarle mas filas a la tabla y saldra los encabezados en todas las paginas asi

si lo hacen en chrome seria genial... :)

Código HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type='text/css' media='print'> 
	body { font-family: Arial;}
	@page{	margin: 0;}
	.hprint {
	position: fixed;
    height: 15mm;
    top: 0;
    left:0;
    font-family: serif;
    }
</style>
</head>

<body>
<table width='893' border='1' cellpadding='0' cellspacing='0' bordercolor='#000000'>
  <thead style="hprint">
  	<tr>
    <th width='62'><div align='center'>FECHA</div></th>
    <th width='229'><div align='center'>CLIENTE</div></th>
    <th width='66'><div align='center'>CAJERO</div></th>
    <th width='22'><div align='center'>T</div></th>
    <th width='42'><div align='center'>DOC</div></th>
    <th width='108'><div align='center'>DOCUMENTO</div></th>
    <th width='111'><div align='center'>FORMA PAGO</div></th>
    <th width='110'><div align='center'>VALOR VENTA</div></th>
    <th width='46'><div align='center'>IGV</div></th>
    <th width='75'><div align='center'>TOTAL</div></th>
    <tr>
  </thead>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   .
   . n filas
   .
</table>
<div style='width:900px;'>
    <table  border='1px' cellpadding='0' cellspacing='0' bordercolor='#000000' style='width:350; margin-left:auto;margin-top:2px;'>
      <tr>
        <td width="101" style='font-size: 12px;'>TOTAL</td>
        <td width="111"  style='font-size: 12px;text-align:right;'>VEENTA</td>
        <td width="47"  style='font-size: 12px;text-align:right;'>IIGGVV</td>
        <td width="81"  style='font-size: 12px;text-align:right;'>TOOTAAL</td>
      </tr>
    </table>
</div>
</body>