Aggiungere contenuto al fondo dell'ultima pagina

Sto usando wkhtmltopdf per creare report in formato PDF da HTML, ho bisogno di creare un rapporto personalizzato che segue questo schema:Aggiungere contenuto al fondo dell'ultima pagina

Alcune informazioni nella parte superiore della prima pagina .
Una tabella che può contenere da 1 a n righe (dovrebbe utilizzare qualsiasi quantità di pagine necessarie)
Alcune informazioni alla fine dell'ultima pagina.

Mettere tutto insieme fa il trucco; tuttavia poiché le informazioni del passaggio 3 vengono visualizzate immediatamente dopo la tabella, c'è un modo per inserire il contenuto alla fine della pagina?

Non sono nemmeno sicuro se questa soluzione sia basata su CSS o basata su wkhtmltopdf.

fonte

2012-02-03 juanefren

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

Date un'occhiata a sezione "piè di pagina e intestazioni".

È possibile utilizzare --footer-html combinato con alcuni JavaScript per eseguire questa operazione.

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

Ho basato il contenuto del mio footer.html sull'esempio fornito nel link qui sopra:

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

fonte

2012-02-09 02:55:44 thirtydot

Grazie, ho avuto un sacco di problemi perché non avevo la versione con patch QT, ho trascorso molto tempo a compilare senza successo finché non ho realizzato che c'era una versione binaria nella pagina. – juanefren

Ho qualche problema a seguire quello che intendi. Qual è la differenza tra il contenuto "immediatamente dopo il tavolo" e "alla fine del tavolo"?

Il tfoot elemento forza essere quello che stai cercando:

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

In caso contrario, si potrebbe elaborare? Un breve esempio dell'HTML che hai o delle immagini di ciò che sembra e di ciò che vuoi che assomigli potrebbe aiutarti.

fonte

2012-02-07 16:42:36 s4y

C'è stato un errore di battitura, intendo mostrare al "ultima della pagina" invece "lo scorso della tabella "questo è un esempio: http: //dl.dropbox.com/u/1990697/example.pdf – juanefren

Questo è un compito abbastanza difficile e non penso che sia possibile risolvere questo problema con CSS puro in questo momento (anche se mi piacerebbe essere smentito).

Anche il supporto per determinate interruzioni di pagina (page-break-inside: avoid;) non è il migliore. In effetti non credo che funzioni finora con il tavolo. Probabilmente ti ritroverai con alcune file divise attorno al pagebrake. (Webkit rende un PDF e poi lo taglia in pagine singole, per lo più a prescindere che cosa è sul bordo ...)

enter image description here

La mia soluzione a questo dilemma è stato quello di creare un'unica segnaposto div s nella dimensione di un singolo pagina e quindi distribuire il contenuto con qualche langugae di programmazione tra questi segnaposto prima di generare il PDF.

Nell'ultimo di tali wrapper è quindi possibile aggiungere un footer posizionato in modo assoluto nella parte inferiore.

Ecco alcuni esempi di codice:

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

fonte

2012-02-07 21:43:53 Jona

Sembra un'idea interessante, come mai questo è come wkhtmltopdf lo converte http://dl.dropbox.com/u/1990697/out.pdf ovviamente sono aperto a un javascript soluzione in caso di necessità. – juanefren

@juanefren Probabilmente hai bisogno di giocherellare un po 'con l'altezza ('.page {height: 1360px;}') per il contenitore della pagina. Sulla mia macchina funziona con il mio codice di esempio. – Jona

@juanefren il tuo allegato non disponibile –

Aggiungere contenuto al fondo dell'ultima pagina

risposta

Problemi correlati