¿Cómo usar HTML para imprimir encabezado y pie de página en cada página impresa de un documento?

¿Es posible imprimir páginas HTML con encabezados y pies de página personalizados en cada página impresa?

Me gustaría agregar la palabra “SIN CLASIFICAR” en rojo, Arial, tamaño 16 pt en la parte superior e inferior de cada página impresa , independientemente del contenido.

Para aclarar, si el documento se imprimió en 5 páginas, cada página debe tener el encabezado y el pie de página personalizados.

¿Alguien sabe si esto es posible usando HTML / CSS?

Si toma el elemento que desea que sea el pie de página y lo establece en su posición: fijo e inferior: 0, cuando la página se imprime repetirá ese elemento en la parte inferior de cada página impresa. Lo mismo funcionaría para un elemento de encabezado, simplemente configure top: 0 en su lugar.

Por ejemplo:

UNCLASSIFIED

CSS:

 @media screen { div.divFooter { display: none; } } @media print { div.divFooter { position: fixed; bottom: 0; } } 

Creo que la respuesta correcta es que HTML 5 y CSS3 no admiten la impresión del encabezado y los pies de página en los medios print .

Y si bien es posible que pueda simularlo con:

  • mesas
  • bloques de posición fijos

cada uno de ellos tiene errores que les impiden ser la solución general ideal.

Acabo de pasar la mayor parte del día buscando una solución que realmente funcionó para mí y pensé que compartiría lo que hice. El problema con las soluciones anteriores que tenía era que todos los elementos de mi párrafo se superponían con el pie de página que quería en la parte inferior de la página. Para evitar esto, utilicé el siguiente CSS:

 footer { font-size: 9px; color: #f00; text-align: center; } @page { size: A4; margin: 11mm 17mm 17mm 17mm; } @media print { footer { position: fixed; bottom: 0; } .content-block, p { page-break-inside: avoid; } html, body { width: 210mm; height: 297mm; } } 

El page-break-inside de p y content-block fue crucial para mí. Cada vez que tengo una p siguiendo una h* , los envuelvo a ambos en una div class = "content-block"> para asegurar que permanezcan juntos y no se rompan.

Espero que alguien lo encuentre útil porque me tomó alrededor de 3 horas averiguarlo (también soy nuevo en CSS / HTML, así que hay eso …)

EDITAR

Por solicitud en los comentarios, estoy agregando un documento HTML de ejemplo. Querrá copiar esto en un archivo HTML, abrirlo y luego elegir imprimir la página. La vista previa de impresión debería mostrar que funciona. Funcionó en Firefox e IE en mi extremo, pero Chrome hizo que la fuente fuera lo suficientemente pequeña como para caber en una página, por lo que no funcionó allí.

 footer { font-size: 9px; color: #f00; text-align: center; } @page { size: A4; margin: 11mm 17mm 17mm 17mm; } @media print { footer { position: fixed; bottom: 0; } .content-block, p { page-break-inside: avoid; } html, body { width: 210mm; height: 297mm; } } 
     

Example Document

This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.

Example Section I

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa. Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit. Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar. Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit. Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.

Example Section II

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.

This is the text that goes at the bottom of every page.

Utilice saltos de página para definir los estilos en CSS:

 @media all { #page-one, .footer, .page-break { display:none; } } @media print { #page-one, .footer, .page-break { display: block; color:red; font-family:Arial; font-size: 16px; text-transform: uppercase; } .page-break { page-break-before:always; } } 

A continuación, agregue el marcado en el documento en los lugares apropiados:

 

unclassified

unclassified

unclassified

unclassified

unclassified

Referencias

  • Medios de páginas de CSS: saltos de página

  • MDN: page-break-before

  • MDN: break-before

  • Diseño de múltiples columnas

  • XHTML Print: segunda edición

  • Webkit Bug 5097: CSS2 page-break-after no funciona

  • Preguntas frecuentes sobre HTML de impresión: ¿El progtwig respetará los estilos de CSS como el salto de página después?

  • Cómo lidiar con saltos de página al imprimir una tabla HTML grande

He estado buscando una solución durante años y encontré esta publicación sobre cómo imprimir un pie de página que funciona en varias páginas sin superponer el contenido de la página.

Mi requisito era IE8, hasta ahora he encontrado que esto no funciona en Chrome. [ actualización ] A partir del 1 de marzo de 2018, también funciona en Chrome

Este ejemplo usa tablas y el elemento tfoot configurando el estilo css:

 tfoot {display: table-footer-group;} 

A partir de esta pregunta , agregue los siguientes estilos a una hoja de estilo solo de impresión. Esta solución funcionará en IE y Firefox, pero no en Chrome (a partir de la versión 21):

 #header { display: table-header-group; } #main { display: table-row-group; } #footer { display: table-footer-group; } 

Traté de luchar en esta inútil batalla combinando las reglas de tfoot y css, pero solo funcionó en Firefox :(. Cuando se usa CSS simple, el contenido fluye sobre el pie de página. Cuando se usa tfoot, el pie de página de la última página no queda bien en la parte inferior Esto se debe a que los pies de tabla están destinados a tablas, no a páginas físicas. Probado en Chrome 16, Opera 11, Firefox 3 y 6 e IE6.

     Header & Footer test     
Weekday Date Manager Qty
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Mon 09/11 Kelsey 639
Tue 09/12 Lindsey 596
Wed 09/13 Randy 1135
Thu 09/14 Susan 1002
Fri 09/15 Randy 908
Sat 09/16 Lindsey 371
Sun 09/17 Susan 272
Total 4923

Si puede usar javascipt, haga que el cliente maneje la disposición del contenido mediante javascript para colocar elementos en función del espacio disponible.

Puede usar el plugin del columnizador jquery para diseñar dinámicamente su contenido en bloques de tamaño fijo y colocar sus encabezados y pies de página como parte de la rutina de renderizado. http://welcome.totheinter.net/columnizer-jquery-plugin/

Vea el ejemplo 10 http://welcome.totheinter.net/autocolumn/sample10.html

El navegador aún agregará sus propios encabezados o pies de página si está habilitado en el sistema operativo. El diseño consistente en plataformas y navegadores probablemente requerirá CSS condicional.

Un enfoque que solo funciona para agregar encabezados a cada página es envolver el contenido en una

y luego colocar el contenido de su encabezado en una etiqueta

y su contenido en una etiqueta

, de esta manera:

 
This content appears on every page
Put all your content here, it can span multiple pages and your header will show up at the top of each page

Esto funciona en Chrome, no está 100% seguro de otros navegadores.

¿Esto es algo que quieres imprimir solo? Puede agregarlo a cada página de su sitio y usar CSS para definir la etiqueta como un medio de solo impresión.

Como ejemplo, este podría ser un encabezado de ejemplo:

 UNCLASSIFIED 

Y en tu CSS, haz algo como esto:

   

Finalmente, para incluir el encabezado / pie de página en cada página, puede usar las inclusiones del lado del servidor o si tiene alguna página generada con PHP o ASP, simplemente puede codificarla en un archivo común.

Editar:

Esta respuesta pretende proporcionar una forma de mostrar algo en la versión impresa física de un documento sin mostrarlo de otro modo. Sin embargo, tal como sugieren los comentarios, no resuelve el problema de tener un pie de página en varias páginas impresas cuando el contenido se desborda.

Lo dejo aquí en caso de que sea útil, sin embargo.

la solución mágica es realmente poner todo en una sola mesa.

  • thead : esto es para el encabezado repetido.

  • tfoot : el pie de página repetido.

  • tbody : el contenido.

y hacer un solo tr, td y poner todo en un div

CÓDIGO ::

 
...
...

 table.report-container { page-break-after:always; } thead.report-header { display:table-header-group; } tfoot.report-footer { display:table-footer-group; } 

extra : para evitar la superposición con varias páginas. me gusta:

 
...
...
...
... ... ...

lo que da como resultado un desbordamiento que hará que las cosas se superpongan con el encabezado dentro de los saltos de página.

entonces >> uso: page-break-inside: avoid !important; con este article clase.

 table.report-container div.article { page-break-inside: avoid; } 

bastante simple, espero que esto te dará el mejor resultado que deseas.

atentamente. 😉

fuente …

Encontré una solución. La idea básica es hacer una tabla y en la sección siguiente colocar los datos del encabezado en tr y por css force para mostrar que tr solo está en la pantalla impresa y que su encabezado normal debe mostrarse solo en la pantalla que no está en la impresión. 100% de trabajo en muchas páginas impresas. código de muestra está aquí

  
COMPANY NAME FOR SCREEN
DESCRIPTION FOR SCREEN
COMPANY NAME FOR PRINT
DESCRIPTION FOR PRINT
Column 1 Column 2 Column 3
1-1 1-2 1-3
2-1 2-2 2-3

Si está usando un motor de plantillas como Asp.net Razor Engine o Angular, creo que debe volver a generar su página y dividirla en varias páginas y luego puede marcar libremente cada página y colocar encabezado y pie de página en el tema. un ejemplo podría ser el siguiente:

 @page { size: A4; margin: .9cm; } @media print { body.print-paper-a4 { width: 210mm; height: 297mm; } body { background: white; margin: 0; padding: 0; } .print-stage, .no-print { display: none; } body.print-paper.a4 .print-paper { width: 210mm; height: 297mm; } .print-paper { page-break-after: always; margin: 0; padding: .8cm; border:none; overflow: hidden; } } .print-papers { display: block; z-index: 2000; margin: auto; } body.print-paper-a4 .print-paper { width: 21cm; height:27cm; } .print-paper { margin: auto; background: white; border: 1px dotted black; box-sizing: border-box; margin: 1cm auto; padding: .8cm; overflow: hidden; } body.print-mode .no-print-preview { display: none; } body.print-mode .print-preview { display: block; } 
    

Si no necesita el formato, use document.title y eso funciona como encanto en todos los principales navegadores (probados en Chrome, IE 11, Firefox).

O puedes usar

 Title repeated on each Page - CLASSIFIED 

Basado en algún post, creo que position: fixed trabajos position: fixed para mí.

 body { background: #eaeaed; -webkit-print-color-adjust: exact; } .my-footer { background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; } .my-header { background: red; top: 0; left: 0; position: fixed; right: 0; } 
    Header & Footer   
Fixed Header
TH 1 TH 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2
TD 1 TD 2