Sto avendo degli incubi per capire come impostare correttamente il layout CSS e HTML per la stampa dei documenti nella nostra web-app. Abbiamo diversi documenti che entrano nel sistema (ordine, fattura, note di consegna, ...). I documenti sono costituiti da:Impostazione di stampa CSS e HTML per documenti multipagina con intestazione e piè di pagina in esecuzione
- intestazione statica (logo aziendale, informazioni di contatto)
- corpo
- dati del cliente (di spedizione, indirizzo di fatturazione) tabella
- articoli (tabella con più righe, che può diffusione della depressione diverse pagine)
- piè di pagina statica (liberatoria)
Quello che voglio è seguenti funzionalità di stampa:
- voglio intestazione statico e piè di pagina per essere stampante su ogni pagina se il corpo si diffonde trogolo diverse pagine
- La tabella degli elementi per avere un colpo di testa tabella stampata in ogni pagina se si diffonde in più pagine
Attualmente il mio layout HTML è simile a questo:
<!-- STATIC HEADER -->
<div id="pageHeader">
<table class="table">
<tr>
<td>Static header content here</td>
</tr>
</table>
</div>
<!-- DOCUMENT CONTENT -->
<div id="pageBody">
<!-- Customer data -->
<table class="table">
<tr>
<td>Customer data here</td>
</tr>
</table>
<!-- Items table -->
<table class="table table-condensed table-print">
<thead style="display:table-header-group;">
<tr>
<th>Table header here</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rows here</td>
</tr>
</tbody>
</table>
</div>
<!-- STATIC FOOTER -->
<div id="pageFooter">
<table class="table">
<tr>
<td>Static footer content here</td>
</tr>
</table>
</div>
Stavo leggendo di eseguire intestazioni e piè di pagina dopo la risposta su this question ma non ottengo i risultati desiderati. Attualmente il mio CSS è impostato in questo modo:
#pageHeader, #pageFooter { display: none; }
@media print {
#pageHeader { display: block; position: running(pageHeader); width: 100%; }
#pageFooter { display: block; position: running(pageFooter); width: 100%; }
}
@page {
@top-center {
content: element(pageHeader);
}
@bottom-center {
content: element(pageFooter);
}
}
Firefox mi dà risultati completamente strani. Per prima cosa stampa una pagina vuota, quindi la seconda pagina va bene se si tratta di un documento a pagina singola, se si tratta di un documento a più pagine, quindi stampa solo la prima pagina, le altre pagine vengono ignorate.
Google Chrome è leggermente migliore. Stampa tutte le pagine ma non stampa intestazione e piè di pagina statici su ogni pagina. L'intestazione viene stampata solo sulla prima pagina, mentre il piè di pagina solo sull'ultima pagina.
Anche l'altro problema è che la tabella principale che può diffondersi attraverso più pagine non stampa l'intestazione della tabella in ogni pagina se la tabella si diffonde attraverso più pagine. Pensavo che lo display:table-header-group; su <thead> avrebbe dovuto farlo?
È semplicemente impossibile ottenere o sto facendo qualcosa di completamente sbagliato? Se puoi darmi qualche consiglio o strategia su come gestirlo sarò molto felice. Poiché questa app è in esecuzione in ambiente controllato, posso concentrarmi su uno o due browser (Chrome e Firefox sarebbero fantastici). Se funziona in entrambi è un bonus!
Ho pubblicato un metodo compatibile con Chrome per simulare le intestazioni di pagina in esecuzione ** [qui] (http://stackoverflow.com/questions/19646835/print-repeating-page-headers-in-chrome/25880258#25880258) * * (nessun supporto per i piè di pagina, però) e una soluzione per la ripetizione di intestazioni di tabelle ** [qui] (http://stackoverflow.com/questions/7211229/having-google-chrome-repeat-table-headers-on-printed -Pagine/25737442 # 25737442) **. – DoctorDestructo