css - paginas - Agrega contenido al final de la última página
etiquetas css (3)
Esta es una tarea bastante difícil y no creo que puedas resolver esto con CSS puro en este momento (aunque me encantaría que se me demuestre lo contrario).
Además, el soporte para determinados saltos de página ( page-break-inside: avoid; ) no es el mejor. De hecho no creo que funcione con la tabla hasta ahora. Probablemente terminaría con algunas filas divididas alrededor del freno de página. (Webkit presenta un PDF y luego lo corta en páginas individuales, principalmente sin importar qué hay en el borde ...)
Mi solución a este dilema fue crear divisiones de marcador de posición individuales en el tamaño de una página y luego distribuir el contenido con algunos lenguajes de programación entre estos marcadores de posición antes de generar el PDF.
En el último de estos envoltorios, podría agregar un pie de página posicionado en la parte inferior.
Aquí hay un código de ejemplo:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sample Data</title>
<style>
* {
padding: 0;
margin: 0;
}
.page {
page-break-inside: avoid;
height: 1360px;
position: relative;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #ccc;
padding: .23em;
}
.footer {
position: absolute;
color: red;
bottom: 0;
}
</style>
</head>
<body>
<div class="page one">
<p>
Some info Here... at the top of first page
</p>
<!-- Zen Coding: table>tbody>(tr>td>{A sample table}+td>{Foo bar})*42 -->
<table>
<tbody>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
</tbody>
</table>
</div>
<div class="page two">
<table>
<tbody>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
<tr><td>A sample table</td><td>Foo bar</td></tr>
</tbody>
</table>
<p class="footer">
The last info here in the bottom of last page
</p>
</div>
</body>
</html>
Estoy usando wkhtmltopdf para crear informes PDF a partir de HTML, necesito crear un informe personalizado que siga este patrón:
- Alguna información en la parte superior de la primera página.
- Una tabla que puede tener de 1 a n filas (debe usar cualquier cantidad de páginas que necesite)
- Alguna información al final de la última página.
Poner todo esto junto hace el truco; sin embargo, debido a que la información del paso 3 aparece inmediatamente después de la tabla, ¿hay alguna forma de colocar el contenido al final de la página?
Ni siquiera estoy seguro de si esta solución está basada en CSS o en wkhtmltopdf.
Me cuesta un poco seguir lo que quieres decir. ¿Cuál es la diferencia entre que el contenido sea "inmediatamente después de la tabla" y "al final de la tabla"?
El elemento tfoot podría ser lo que estás buscando:
<table>
<thead>
<tr><th>Header</th></tr>
</thead>
<tfoot>
<tr><th>Footer</th></tr>
</tfoot>
<tbody>
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
</tbody>
</table>
Si no, ¿podrías elaborar? Un breve ejemplo del HTML que tienes o las imágenes de cómo se ve y cómo quieres que se vea podría ayudar.
http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html
Echa un vistazo a la sección "Pie de página y encabezados".
Puedes usar --footer-html combinado con algún JavaScript para hacer esto.
wkhtmltopdf --footer-html footer.html http://www..com/ so.pdf
footer.html el contenido de mi footer.html en el ejemplo proporcionado en el enlace anterior:
<!DOCTYPE html>
<script>
window.onload = function() {
var vars = {};
var x = document.location.search.substring(1).split(''&'');
for (var i in x) {
var z = x[i].split(''='', 2);
vars[z[0]] = unescape(z[1]);
}
//if current page number == last page number
if (vars[''page''] == vars[''topage'']) {
document.querySelectorAll(''.extra'')[0].textContent = ''extra text here'';
}
};
</script>
<style>
.extra {
color: red;
}
</style>
<div class="extra"></div>