Añadir contenido a la parte inferior de la última página

estoy usando wkhtmltopdf para crear informes en PDF de HTML, lo que necesito para crear un informe personalizado que sigue este patrón:Añadir contenido a la parte inferior de la última página

Parte de la 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 en orden hace el truco; sin embargo, dado 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 basada en wkhtmltopdf.

Fuente

2012-02-03 juanefren

http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html

Tome un vistazo a la sección "pies de página y encabezados".

Puede usar --footer-html combinado con algunos JavaScript para hacer esto.

wkhtmltopdf --footer-html footer.html http://www.stackoverflow.com/ so.pdf

basé el contenido de mi footer.html en el ejemplo que se incluye en el siguiente enlace:

<!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>

Fuente

2012-02-09 02:55:44 thirtydot

Gracias, tuve muchos problemas porque no tenía la versión parchada QT, pasé mucho tiempo compilando sin éxito hasta que me di cuenta de que había una versión binaria en la página. – juanefren

Tengo un pequeño problema para entender lo que quieres decir. ¿Cuál es la diferencia entre el contenido "inmediatamente después de la mesa" y "al final de la mesa"?

El tfoot elemento poder ser lo que está 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 es así, ¿podría usted explicar? Un breve ejemplo del HTML que tiene o imágenes de cómo se ve y cómo quiere que se vea podría ayudar.

Fuente

2012-02-07 16:42:36 s4y

Hubo un error tipográfico, me refiero a mostrar en el "último de la página" en lugar de "última de la tabla "este es un ejemplo: http: //dl.dropbox.com/u/1990697/example.pdf – juanefren

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 demuestre que estoy equivocado).

También 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 el momento. Probablemente terminarías con algunas filas divididas alrededor del freno de página. (Webkit hace un PDF y luego lo corta en páginas individuales, sobre todo sin tener en cuenta lo que esta en el borde ...)

enter image description here

Mi solución a este dilema fue la creación de un solo marcador de posición div s en el tamaño de una sola página y luego distribuir el contenido con algunas langucias de programación entre estos marcadores de posición antes de generar el PDF.

En la última de estas envolturas, puede agregar un pie de página de posición absoluta 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>

Fuente

2012-02-07 21:43:53 Jona

Parece una idea interesante, sin embargo, ¿cómo es que wkhtmltopdf lo convierte http://dl.dropbox.com/u/1990697/out.pdf, por supuesto, estoy abierto a un javascript solución en caso de ser necesario. – juanefren

@juanefren Probablemente tengas que jugar un poco con la altura ('.page {height: 1360px;}') para el contenedor de la página. En mi máquina funciona con mi código de muestra. – Jona

@juanefren su archivo adjunto no está disponible –

Añadir contenido a la parte inferior de la última página

Respuesta

Cuestiones relacionadas