2009-11-12 11 views
36

Según mi investigación, parece que lo que quiero hacer no es posible, pero en caso de que algo haya cambiado, quería verificar si alguien había encontrado una manera de hacerlo.¿Hay alguna manera de obtener un encabezado/pie de página web impreso en cada página?

Tengo una aplicación web que genera informes para imprimir según las selecciones del usuario en la ventana del navegador. Tengo un encabezado y pie de página personalizado que, cuando se imprime el informe desde el navegador, debe repetirse en cada página impresa. No es el encabezado y el pie de página del navegador que necesito, sino los personalizados que genero. Además, no creo que este sea un problema de CSS y tipos de medios, pero no soy un experto en CSS. No tengo problemas para imprimir el encabezado y el pie de página una vez, pero no puedo hacer que se impriman en cada página. He leído que quizás si recreé mis páginas de informes usando tablas, y luego usé etiquetas de cabecera de tabla y CSS, eso puede funcionar al menos para obtener el encabezado en cada página. Todavía no he tenido éxito con esto, pero lo intentaré de nuevo si es la única opción. Un compañero de trabajo me sugirió que cuente las líneas en mi php y coloque manualmente el encabezado y el pie de página según sea necesario. ¡Supongo que es una opción, pero parece que debería haber una manera de hacer esto que no sea la "fuerza bruta"!

La otra advertencia es que tengo que soportar IE 6, entonces sospecho que algunas de las cosas de CSS que he probado simplemente no son compatibles.

Si alguien sabe alguna forma de hacerlo, sería genial. Si no lo hay, tendré que repensar mi enfoque.

¡Gracias de antemano!

ACTUALIZACIÓN (14 Dic 2011)

he hecho un progreso considerable con este tema, y ​​el uso de parte de la información a partir de las respuestas, que produjo informes que eran utilizables, pero nunca tan bien o tan profesional como Quise. Los pies de página tendían a no estar lo suficientemente cerca de la parte inferior de la página, tuve que hacer muchos cálculos y cálculos "frágiles" sobre qué tan grande iba a ser el texto para decidir insertar saltos de página, solo podía apoyar una restricción un conjunto de formatos de página y cualquier cambio en los informes resultó en una cascada de cambios de código y aún más cálculos frágiles. Siempre hubo un escenario que rompió parte de algún informe. Revisamos los requisitos, y ahora estamos generando informes en formato PDF usando TCPDF. La documentación es un tanto opaca y requiere un poco de experimentación, pero los resultados son muy superiores y ahora los informes aparecen como deberían. Diría a cualquiera que intente hacer informes HTML desde el navegador, a menos que sean muy simples, ahórrese la frustración (como me dijeron otros aquí) y vaya con archivos PDF o algo similar.

+3

¡Buena suerte! Imprimir en los navegadores es horrible. Una vez intenté crear una hoja de estilo de impresión sofisticada para libros electrónicos. En realidad, Opera lo mostró como yo quería, pero todos los demás fallaron. IE6? Bwa-ha-ha-ha ... * limpiando lágrimas por el rabillo del ojo *. – Boldewyn

+1

Estoy con Boldewyn, tantas horas jugando con los informes de formato en los navegadores, llorando tantas lágrimas y lanzando computadoras. Siempre presiono mucho para usar herramientas de informes de terceros como Telerik Reporting o algo así ahora, solo con la esperanza de poder mantener algo de mi cabello un poco más. –

+3

Afortunadamente, ya me queda poco pelo, por lo que no es un problema;) –

Respuesta

30

Se puede hacer con mesas - y sé que voy a correr el riesgo de una downvote sugiriendo que utilizan tablas para diseño - pero estamos hablando aquí IE6 que no es conocida por su fantástico soporte CSS :-)

Si define un estilo CSS de la siguiente manera:

thead { display: table-header-group; } 
tfoot { display: table-footer-group; } 

A continuación, cuando se crea el código HTML, hacer que su cuerpo como:

<body> 
<table> 
    <thead><tr><td>Your header goes here</td></tr></thead> 
    <tfoot><tr><td>Your footer goes here</td></tr></tfoot> 
    <tbody> 
    <tr><td> 
    Page body in here -- as long as it needs to be 
    </td></tr> 
    </tbody> 
</table> 
</body> 

Sí No es bueno (tablas vs CSS), que no es lo ideal, pero (importante para usted) que funciona en IE6. No puedo comentar sobre Firefox porque no lo he probado allí, pero debería hacer el trabajo. Esto también manejará páginas de diferentes tamaños, diferentes tamaños de fuente, etc. por lo que debería "funcionar".

Si desea que el encabezado y el pie de aparecer en los medios impresos solamente, a continuación, utilizar los parámetros @media a hacer lo correcto:

@media print { 
    thead { display: table-header-group; } 
    tfoot { display: table-footer-group; } 
} 
@media screen { 
    thead { display: none; } 
    tfoot { display: none; } 
} 

Nota
A partir de julio de 2015, este solo funcionará en Firefox e IE. navegadores basados ​​en WebKit (cf. Chrome, Safari) tienen errores de larga data en sus gestores de incidencias sobre este si alguien se siente lo suficientemente fuerte para votar sobre ellas:

+0

Gracias Chris J. Sé que se supone que no deben usar tablas en estos días, pero este trabajo hace exactamente lo que necesitaba, ¡y me ahorra hacer locuras como contar líneas! ¿Usar tablas para este propósito específico en el sitio podría no ser "tan" malo? :) ¡Gracias de nuevo! –

+0

El único problema con esto es que tfoot tiene que venir a la derecha después de la culata en T (antes tbody);) – SeanJA

+0

sólo pensé que debería decir, He intentado esto en Firefox 3 y 4, el IE 8, Opera 10, y Safari 5. Funciona en FF e IE, falla en Safari y Opera. Tanto en FF como en IE, lo mostrará en la parte inferior de cada página, luego en la parte inferior del texto en la última página (si es> 1 página). Los demás simplemente lo mostrarán en la parte inferior del texto en la última página. – Tarka

3

Esto funcionará en algunos navegadores, no en todos. No creo que hay una elegante solución multi-navegador

Incluir el pie de página de impresión/cabecera que desea en divs en la página (en este ejemplo div id = 'printableFooter')

en el archivo CSS pantalla poner:

#printableFooter {display: none;} 

en el archivo CSS de impresión:

#printableFooter {display: block; position: fixed; bottom: 0;} 
+0

Voy a intentar esto, aunque pensé que la posición: arreglada no funcionaba en IE 6? Todavía lo intentaré. Gracias. –

+0

No, no funcionará en IE6 desafortunadamente. – UpTheCreek

+0

Lo siento, ¡solo lea su requisito ie6! Supongo que esto lo descarta :( – UpTheCreek

5

sugeriría a dividir la página en la tabla, y añadir la parte de cabecera de primera fila y la parte de pie de página a la última fila. El contenido de las filas entre la primera y la última fila se puede cambiar dinámicamente para que obtenga el encabezado y el pie de página constantes en las páginas deseadas.

---------- 
ROW1 HEADER 
---------- 
ROW2 
Insert dynamic contents here 
ROW N-1 
---------- 
ROW N Footer 

+3

No use tablas para el diseño. –

+20

no descartadamente downvote. Es una solución viable al problema. – nickf

+0

I estoy de acuerdo sobre no votar. Esta puede ser mi única opción si puedo hacerlo funcionar en IE 6. Sé que una regla general es no usar tablas para el diseño en el mundo web moderno, pero creo que este es un caso especial. –

3

tratar de generar un (rtf | pdf) para la impresión de documentos

+0

Quería evitar la generación de tipos de documentos adicionales porque, una vez que se imprime el informe, lo ideal es que no desee guardar un archivo en ninguna parte. Supongo que un pdf temp puede ser una opción, pero luego es más fácil para las personas guardar ese documento, y debo evitarlo o, al menos, hacerlo inconveniente. –

+0

hi carvell, los usuarios pueden descargar de la página web, que permite automatizar con un pdf tmp el archivo usabilidad proceso no está muy afectada, puede proporcionar a la vista html y pdf para imprimir la –

+0

:) Así que para la impresión que quiere decir sólo el PDF existe en el "fondo" y no es visto por el usuario? –

Cuestiones relacionadas