Imprimir pie de página en cada página impresa del sitio web, en todos los navegadores (Chrome)

Queridos todos, Intenté CSS Position: Fixed Property, pero funciona correctamente en Firefox e IE (hack para IE6), pero no funciona para nada Cromo. Pensé que Chrome sería lo último lo admitiría muy fácilmente, pero aún no lo es. Intenté < thead>, < tfoot> < tbody> funciona de nuevo en IE y Firefox, pero es problemático en Chrome. Por favor, cualquiera tiene una solución alternativa.Imprimir pie de página en cada página impresa del sitio web, en todos los navegadores (Chrome)

Fuente

2010-09-21 Sagar Kadam

Hola. Me encontré con este problema también. Parece que Chrome controla la posición de impresión: se ha solucionado de forma diferente a todos los demás. Maldición ... Profundizará en este. – mtness

-9

Este es el código que uso. Tenga en cuenta que estoy configurando html y la altura del cuerpo al 100%.

@media print { 
    html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
}

Fuente

2012-08-15 05:13:43 tim

Esto no resuelve el problema en absoluto. Hará que el pie de página se imprima solo en la última página. Incluso lo frenó en los navegadores que funcionaban con la posición fija. –

Parece que Chrome [webkit] tiene una forma diferente de manejar la posición: se ha corregido en las hojas de estilo de impresión que el resto de los navegadores.

Así que la respuesta actual a esta pregunta es:
No hay una solución adecuada para esto en Chrome.

Mientras que FF e IE lo renderizan en Cada página, Opera no lo muestra en absoluto, y los navegadores webkit solo lo muestran en la primera página.

pequeño archivo de prueba:

<!DOCTYPE HTML> 
 
    <html lang="en-US"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>print css test by mtness</title> 
 
    \t <style type="text/css"> 
 
    \t @media print { 
 
    \t \t #watermark { 
 
    \t \t \t display: block; 
 
    \t \t \t position: fixed; 
 
    \t \t \t top: 0; 
 
    \t \t \t right: 0; 
 
    \t \t \t z-index: 5; 
 
    \t \t } 
 
    
 
    \t \t p { 
 
    \t \t \t position: relative; 
 
    \t \t \t top: 40pt; 
 
    \t \t \t display: block; 
 
    \t \t \t page-break-after: always; 
 
    \t \t \t z-index: 0; 
 
    \t \t } 
 
    \t } 
 
    \t </style> 
 
    </head> 
 
    <body> 
 
    \t <div id="watermark">AWESOME!</div> 
 
    \t <p>page1</p> 
 
    \t <p>page2</p> 
 
    \t <p>page3</p> 
 
    </body> 
 
    </html>

más recursos se podría encontrar aquí:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/

página de prueba:
http://www.andypemberton.com/sandbox/watermark/

HTH. Atentamente, mtness.

Fuente

2011-05-04 15:56:21 mtness

A partir de junio de 2015, esto sigue siendo cierto para Chrome. – mtness

Consulte mi respuesta a continuación para una posible solución actualizada a este problema, se corrigió @mtness – lastmjs

[Se repiten encabezados de tabla en páginas impresas] (https://bugs.chromium.org/p/chromium/issues/detail?id=24826) en Chrome el 5 de junio de 2016. Tengo la versión 51.0.2704.103 en Mac OS X y funciona. – Ricardo

Editar: Al parecer, el error se ha corregido, por lo que la biblioteca comparto a continuación puede no ser de mucha utilidad más.

De toda mi investigación, es correcto que no hay forma de obtener posición: se corrigió para funcionar en Chrome. Aquí hay un enlace al bug en la página del proyecto Chromium.

Mientras tanto, he creado un proyecto de código abierto que le permite imprimir encabezados y pies de página en Chrome. Es temprano en el desarrollo, pero funciona, dependiendo de la estructura de su diseño html:

https://github.com/byuarchdi/print-headers-and-footers

Es un trabajo en progreso, y se basa en gran medida en la CSS Regions Polyfill. Pero estoy usando las técnicas de esta biblioteca con muy buen efecto en un proyecto en el trabajo.

Fuente

2015-12-23 22:52:27 lastmjs

El error se ha marcado como arreglado en abril de 2016. –

Se arregló por un tiempo, parece estar de nuevo roto ... al menos en la vista web de Android. Muy extraño. – fattire

En Chrome siempre recibo "Uncaught (en promesa) TypeError: document.getNamedFlow no es una función" incluso en sus ejemplos – Ruwen

Lo logré utilizando tablas, pero solo para encabezados en cromo. Puse el contenido repetitivo en la etiqueta de andad y el contenido de la página en tbody, por lo que el navegador interpretó correcto.

Sin embargo, he encontrado un error en HTML de grandes contenidos. En algunos casos, el contenido se superpone al encabezado. En la fecha en que publico esto, aún no encontré una solución.

When printing tables in Google Chrome, content overlaps header

Fuente

2017-08-10 19:22:18

Imprimir pie de página en cada página impresa del sitio web, en todos los navegadores (Chrome)

Respuesta

Cuestiones relacionadas