css - print - Imprima pie de página en cada página impresa desde el sitio web, en todos los navegadores(Chrome)
html tamaño carta (5)
Edición: al parecer, el error se ha solucionado, por lo que la biblioteca que comparto a continuación puede que ya no sea de mucha utilidad.
De todas mis investigaciones, es correcto que no hay forma de obtener una position: fixed para funcionar en Chrome. Aquí hay un enlace al bug en la página del proyecto Chromium.
Mientras tanto, he creado este proyecto de código abierto que te permite imprimir encabezados y pies de página en Chrome . Es un desarrollo inicial, pero funciona, dependiendo de la estructura de su diseño HTML:
Es un trabajo en progreso y se basa en gran medida en el CSS Polyfill de Regions . Pero estoy usando las técnicas en esta biblioteca para un efecto muy bueno en un proyecto en el trabajo.
Queridos todos, probé CSS Position: Fixed Property pero funciona correctamente en Firefox e IE (hack para IE6), pero no funciona en absoluto en Chrome. Pensé que Chrome es el último lo soportará muy fácilmente pero aún no lo es. Intenté con <thead>,<tfoot> <tbody> otra vez funciona en IE y Firefox, pero problemático en Chrome. Por favor, cualquiera tiene una solución alternativa para ello.
Este es el código que uso. Tenga en cuenta que estoy configurando tanto la altura del cuerpo y html en 100%.
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Logré eso usando tablas, pero solo para encabezados en Chrome. Coloqué el contenido que se repetía en la etiqueta de thead y el contenido de la página en el cuerpo, por lo que el navegador interpretó correctamente.
Sin embargo, me he encontrado con un error en grandes contenidos HTML. En algunos casos, el contenido se superpuso al encabezado. En la fecha en que estoy publicando esto, todavía no encontré una solución.
Al imprimir tablas en Google Chrome, el contenido se superpone al encabezado
Parece que Chrome [webkit] tiene una forma diferente de manejar la posición: arreglado 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 y IE lo muestran en Cada página, Opera no lo muestra en absoluto, y los navegadores de webkits solo lo muestran en la primera página.
pequeño archivo de prueba:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>print css test by mtness</title>
<style type="text/css">
@media print {
#watermark {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 5;
}
p {
position: relative;
top: 40pt;
display: block;
page-break-after: always;
z-index: 0;
}
}
</style>
</head>
<body>
<div id="watermark">AWESOME!</div>
<p>page1</p>
<p>page2</p>
<p>page3</p>
</body>
</html>
Más recursos se pueden 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. Saludos cordiales, mtness.
thead.report-header {
display: table-header-group;
}
tfoot.report_footer_Mh {
display:table-footer-group;
}
tabel.report-container {
page-break-after: always;
}
<table class="report-container" cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word">
<!-- place the header part here-->
<thead class="report_header_Mh">
<tr>
<th class="report_header_cell_Mh">
<div class="header_info_Mh">
</div>
</th>
</tr>
</thead>
<!-- Header Ends here-->
<!-- Place the Main Content here-->
<tbody class="report_content_Mh">
<tr>
<td class="report_content-cell_Mh">
<div class="main_Mh">
</div>
</td>
</tr>
</tbody>
<!-- Main Content ends here-->
<!--Place Footer content here-->
<tfoot class="report_footer_Mh">
<tr>
<td class="report_footer-cell_Mh">
<div class="footer_info_Mh">
</div>
</td>
</tr>
</tfoot>
<!-- Footer Ends here-->
</table>
It worked for me try this way