Pegar el pie de página personalizado en cada página en la parte inferior mientras imprime

Quiero imprimir 30 páginas con algunos datos en la parte superior y algunos datos en la parte inferior. Mi código se ve así:

 
This should be on top1
This should be on bottom1
This should be on top2
This should be on bottom2

Intenté todo:

  • Posiciones: relativo (sin cambios), absoluto (pie de página en la primera página solamente), fijo (en la última página solamente)
  • Configurando html, body, cada div height al 100%. No sé por qué debería hacer esto. No cambió nada

¿Tal vez hay una forma de forzar a mi navegador (FF) a pegar div al final de la página?

Finalmente encontró una respuesta:

  1. html, cuerpo DEBE TENER altura: 100%;
  2. Debe haber dos tipos de div: afuera (tamaño de la página), pie de página
  3. Para ambas pantallas de conjunto: bloque;
  4. Para la altura del conjunto exterior: 100%; posición: relativa;
  5. Para la posición del conjunto interior: absoluta; abajo: 0px;

Voila!

Aquí está mi código completo:

 < !DOCTYPE HTML>      
Page1
Page1Footer
Page2
Page2Footer
Page3
Page3Footer

Actualización He jugado un poco con el código anterior y esto puede funcionar más fácil de lo que inicialmente pensé. (Tenga en cuenta que existe la posibilidad de que el pie de página solape el contenido del div anterior, esto podría resolverse agregando un atributo de margin-bottom al div de contenido igual a la altura del conjunto de pie de página personalizado). Además, si el contenido de su página es demasiado largo saltos de página, esto todavía tendrá un par de escenarios que necesitan asistencia). Dicho todo eso, probé a nivel local y funcionó como lo deseabas.

CSS

  

HTML

  
This should be on top1
This should be on top2


Respuesta original

Desafortunadamente no hay una manera fácil de hacer esto. Los navegadores no ofrecen un medio para crear encabezados y pies de página personalizados para imprimir.

Su mejor opción es colocar la información que desea en cada página de la etiqueta del título que se encuentra en YOUR COMMON CONTENT No va a ser el más bonito. Todo se reduce a tus requisitos.

La otra opción es usar @media print (CSS) junto con javascript para calcular dinámicamente e insertar saltos de página / huecos de espacio en blanco mientras inserta los divs (su pie de página y / o encabezado personalizados) en posiciones absolutas para el tamaño de papel conocido. Luego, después del evento de impresión, cambie el formato de forma dinámica.

Esto funciona para mí

Simplemente agregue el siguiente CSS en su archivo html

 @page { margin-bottom: 40px; counter-increment: page; @bottom-right { border-top: 1px solid #000000; padding-right:20px; font-size: 12px !important; content: "Page " counter(page) " of " counter(pages); } @bottom-left { content: "Footer content goes here."; border-top: 1px solid #000000; } } 

Si usa los elementos y para su encabezado y pie de página

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

Fuente: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size