Foros del Web » Creando para Internet » HTML »

Imprimir listado con encabezado en cada hojaA4

Estas en el tema de Imprimir listado con encabezado en cada hojaA4 en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/12/2011, 15:17
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Imprimir listado con encabezado en cada hojaA4

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.
__________________
Mono programando!
twitter.com/eguimariano
  #2 (permalink)  
Antiguo 14/12/2011, 16:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Imprimir listado con encabezado en cada hojaA4

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 14/12/2011, 16:16
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Imprimir listado con encabezado en cada hojaA4

Cita:
Iniciado por emprear Ver Mensaje
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.
__________________
Mono programando!
twitter.com/eguimariano
  #4 (permalink)  
Antiguo 15/12/2011, 08:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 1 mes
Puntos: 539
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.
  #5 (permalink)  
Antiguo 18/12/2011, 11:22
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Imprimir listado con encabezado en cada hojaA4

Cita:
Iniciado por kseso? Ver Mensaje
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
__________________
Mono programando!
twitter.com/eguimariano
  #6 (permalink)  
Antiguo 18/12/2011, 17:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 1 mes
Puntos: 539
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=..."
  #7 (permalink)  
Antiguo 19/12/2011, 15:37
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Imprimir listado con encabezado en cada hojaA4

Cita:
Iniciado por kseso? Ver Mensaje
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=...."
__________________
Mono programando!
twitter.com/eguimariano
  #8 (permalink)  
Antiguo 19/12/2011, 16:57
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Imprimir listado con encabezado en cada hojaA4

Estuve haciendo unas pruebas y solo conseguí un resultado aceptable en Firefox, te lo dejo como ejemplo
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <link rel="stylesheet" type="text/css" href="p.css" media="print" />
  7. <link rel="stylesheet" type="text/css" href="s.css" media="screen" />
  8. </head>
  9.     <div class="hprint">
  10.         <h1>Header de impresión</h1>
  11.     </div>
  12. <table id="tabla" border="1">
  13. <tr>
  14. <td>
  15. celda 1 fila 1 <p>parrafo</p>
  16. </td>
  17. <td>
  18. celda 2 fila 1
  19. </td>
  20. <td>
  21. celda 3 fila 1
  22. </td>
  23. </tr>
  24. <tr>
  25. <td>
  26. celda 1 fila 2
  27. </td>
  28. <td>
  29. celda 2 fila 2
  30. </td>
  31. <td>
  32. celda 3 fila 2
  33. </td>
  34. </tr>
  35. <!-- insertar mas  filas aquí -->
  36.  
  37.     <div class="fprint">
  38.         <h1>footer de impresión</h1>
  39.     </div>
  40. </body>
  41. </html>

s.css
Código CSS:
Ver original
  1. div.hprint, div.fprint{
  2. display: none;
  3. }

p.css
Código CSS:
Ver original
  1. div.hprint {
  2. position: fixed;
  3. height: 120px;
  4. display:block;
  5. }
  6. div.fprint {
  7. position: fixed;
  8. height: 120px;
  9. margin-top: 120px;
  10. display:block;
  11. bottom: 0;
  12. left: 0;
  13. }
  14. table {
  15. margin-top: 120px;
  16. margin-bottom: 120px;
  17. }

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 19/12/2011, 17:48
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Imprimir listado con encabezado en cada hojaA4

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

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <link rel="stylesheet" type="text/css" href="p.css" media="print" />
  7. <link rel="stylesheet" type="text/css" href="s.css" media="screen" />
  8. </head>
  9.     <div class="hprint">
  10.         <h1>Header de impresión</h1>
  11.     </div>
  12. <table id="tabla" border="1" class="tabla">
  13. <tr>
  14. <td>
  15. celda 1 fila 1 <p>parrafo</p>
  16. </td>
  17. <td>
  18. celda 2 fila 1
  19. </td>
  20. <td>
  21. celda 3 fila 1
  22. </td>
  23. </tr>
  24. <tr>
  25. <td>
  26. celda 1 fila 2
  27. </td>
  28. <td>
  29. celda 2 fila 2
  30. </td>
  31. <td>
  32. celda 3 fila 2
  33. </td>
  34. </tr>
  35. <!-- insertar mas  filas aquí -->
  36. <tr>
  37. <td>
  38. celda 1 fila 1 <p>parrafo</p>
  39. </td>
  40. <td>
  41. celda 2 fila 1
  42. </td>
  43. <td>
  44. celda 3 fila 1
  45. </td>
  46. </tr>
  47. <tr>
  48. <td>
  49. celda 1 fila 2
  50. </td>
  51. <td>
  52. celda 2 fila 2
  53. </td>
  54. <td>
  55. celda 3 fila 2
  56. </td>
  57. </tr><tr>
  58. <td>
  59. celda 1 fila 1 <p>parrafo</p>
  60. </td>
  61. <td>
  62. celda 2 fila 1
  63. </td>
  64. <td>
  65. celda 3 fila 1
  66. </td>
  67. </tr>
  68. <tr>
  69. <td>
  70. celda 1 fila 2
  71. </td>
  72. <td>
  73. celda 2 fila 2
  74. </td>
  75. <td>
  76. celda 3 fila 2
  77. </td>
  78. </tr><tr>
  79. <td>
  80. celda 1 fila 1 <p>parrafo</p>
  81. </td>
  82. <td>
  83. celda 2 fila 1
  84. </td>
  85. <td>
  86. celda 3 fila 1
  87. </td>
  88. </tr>
  89. <tr>
  90. <td>
  91. celda 1 fila 2
  92. </td>
  93. <td>
  94. celda 2 fila 2
  95. </td>
  96. <td>
  97. celda 3 fila 2
  98. </td>
  99. </tr><tr>
  100. <td>
  101. celda 1 fila 1 <p>parrafo</p>
  102. </td>
  103. <td>
  104. celda 2 fila 1
  105. </td>
  106. <td>
  107. celda 3 fila 1
  108. </td>
  109. </tr>
  110. <tr>
  111. <td>
  112. celda 1 fila 2
  113. </td>
  114. <td>
  115. celda 2 fila 2
  116. </td>
  117. <td>
  118. celda 3 fila 2
  119. </td>
  120. </tr><tr>
  121. <td>
  122. celda 1 fila 1 <p>parrafo</p>
  123. </td>
  124. <td>
  125. celda 2 fila 1
  126. </td>
  127. <td>
  128. celda 3 fila 1
  129. </td>
  130. </tr>
  131. <tr>
  132. <td>
  133. celda 1 fila 2
  134. </td>
  135. <td>
  136. celda 2 fila 2
  137. </td>
  138. <td>
  139. celda 3 fila 2
  140. </td>
  141. </tr><tr>
  142. <td>
  143. celda 1 fila 1 <p>parrafo</p>
  144. </td>
  145. <td>
  146. celda 2 fila 1
  147. </td>
  148. <td>
  149. celda 3 fila 1
  150. </td>
  151. </tr>
  152. <tr>
  153. <td>
  154. celda 1 fila 2
  155. </td>
  156. <td>
  157. celda 2 fila 2
  158. </td>
  159. <td>
  160. celda 3 fila 2
  161. </td>
  162. </tr><tr>
  163. <td>
  164. celda 1 fila 1 <p>parrafo</p>
  165. </td>
  166. <td>
  167. celda 2 fila 1
  168. </td>
  169. <td>
  170. celda 3 fila 1
  171. </td>
  172. </tr>
  173. <tr>
  174. <td>
  175. celda 1 fila 2
  176. </td>
  177. <td>
  178. celda 2 fila 2
  179. </td>
  180. <td>
  181. celda 3 fila 2
  182. </td>
  183. </tr><tr>
  184. <td>
  185. celda 1 fila 1 <p>parrafo</p>
  186. </td>
  187. <td>
  188. celda 2 fila 1
  189. </td>
  190. <td>
  191. celda 3 fila 1
  192. </td>
  193. </tr>
  194. <tr>
  195. <td>
  196. celda 1 fila 2
  197. </td>
  198. <td>
  199. celda 2 fila 2
  200. </td>
  201. <td>
  202. celda 3 fila 2
  203. </td>
  204. </tr><tr>
  205. <td>
  206. celda 1 fila 1 <p>parrafo</p>
  207. </td>
  208. <td>
  209. celda 2 fila 1
  210. </td>
  211. <td>
  212. celda 3 fila 1
  213. </td>
  214. </tr>
  215. <tr>
  216. <td>
  217. celda 1 fila 2
  218. </td>
  219. <td>
  220. celda 2 fila 2
  221. </td>
  222. <td>
  223. celda 3 fila 2
  224. </td>
  225. </tr>
  226.  
  227.     <div class="fprint">
  228.         <h1>footer de impresión</h1>
  229.     </div>
  230. </body>
  231. </html>

s.css
Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. div.fprint{
  5. display: none;
  6. }
  7. div.hprint{
  8. display:block;
  9.     border:double;
  10. }
  11. .tabla{
  12.     width:100%;
  13.     border:#000000;
  14.     border:double;
  15.     top:50px;
  16.     position:relative;
  17.     page-break-after:auto;
  18. }

p.css

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. div.hprint {
  5. position: fixed;
  6. height: 120px;
  7. display:block;
  8. }
  9. div.fprint {
  10. position: fixed;
  11. height: 120px;
  12. margin-top: 120px;
  13. display:block;
  14. bottom: 0;
  15. left: 0;
  16. }
  17. .tabla{
  18.     width:100%;
  19.     border:#000000;
  20.     border:double;
  21.     top:100px;
  22.     position:relative;
  23.     page-break-after:auto;
  24. }

Funciona bien en IE y Firefox

Lo que no queda bien es el footer
__________________
Mono programando!
twitter.com/eguimariano
  #10 (permalink)  
Antiguo 20/12/2011, 07:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 1 mes
Puntos: 539
Respuesta: Imprimir listado con encabezado en cada hojaA4

Cita:
Iniciado por SirDuque Ver Mensaje
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
  1. @page {
  2.   size: 210mm 197mm;
  3. }
  4. .hprint {
  5. position: fixed;
  6. height: 15mm;
  7. top: 0;
  8. left:0;
  9. font-family: serif;
  10. }
  11. .fprint {
  12. position: fixed;
  13. height: 15mm;
  14. bottom: 0;
  15. left: 0;
  16. font-family: sans-serif;
  17. }
  18. .tabla{
  19.     width:100%;
  20.     border:#000000;
  21.     border:double;
  22.     margin-top: 18mm;
  23.     margin-bottom: 18mm;
  24.     position:relative;
  25.     page-break-after:auto;
  26.     font-family: monospace;
  27. }

No he podido verlo más que en ff.

Última edición por kseso?; 20/12/2011 a las 07:54
  #11 (permalink)  
Antiguo 21/12/2011, 07:45
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Imprimir listado con encabezado en cada hojaA4

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
  1. .tabla{
  2.     top:20mm;
  3.     bottom: 20mm; /*No afecta^*/
  4.     width:100%;
  5.     border:#000000;
  6.     border:double;
  7. /*  margin-top: 20mm;
  8.     margin-bottom: 20mm;*/
  9.     position:relative;
  10.     page-break-after:auto;
  11.     font-family: monospace;
  12. }

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.
__________________
Mono programando!
twitter.com/eguimariano

Última edición por SirDuque; 21/12/2011 a las 07:47 Razón: me di cuenta de algo
  #12 (permalink)  
Antiguo 23/12/2011, 14:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 15 años, 1 mes
Puntos: 539
Respuesta: Imprimir listado con encabezado en cada hojaA4

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.
  #13 (permalink)  
Antiguo 23/12/2011, 17:26
Avatar de SirDuque  
Fecha de Ingreso: febrero-2009
Ubicación: Paso del Rey, Buenos Aires, Argentina
Mensajes: 975
Antigüedad: 13 años, 4 meses
Puntos: 89
Respuesta: Imprimir listado con encabezado en cada hojaA4

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.
__________________
Mono programando!
twitter.com/eguimariano
  #14 (permalink)  
Antiguo 19/06/2012, 10:58
 
Fecha de Ingreso: junio-2012
Mensajes: 1
Antigüedad: 10 años
Puntos: 0
De acuerdo Respuesta: Imprimir listado con encabezado en cada hojaA4

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> 

Última edición por wapton; 19/06/2012 a las 11:22

Etiquetas: encabezado, listado, php
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:58.