Voglio mettere l'intestazione e il piè di pagina in ogni pagina in modalità di stampa. Ho fatto molte ricerche al riguardo.Intestazione e piè di pagina personalizzati nella pagina html
Ho trovato due soluzioni. Ma non sono cross-browser (voglio che funzioni in IE, Firefox e Chrome)
La prima soluzione: sto impostando i margini in alto e in basso nella tabella dei contenuti. Quindi scrivo intestazione e piè di pagina in questi spazi con posizione fissa. Funziona perfettamente in Firefox. Ma in IE e Chrome non ha margini. Inoltre in Chrome non scrive intestazione e piè di pagina in ogni pagina.
Ecco il mio codice:
pagination.php
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>
<body>
<table class="header" cellpadding="0" cellspacing="0">
<tr>
<td>header
</td>
</tr>
</table>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
content
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>footer
</td>
</tr>
</table>
</body>
</html>
pagination.css
@media screen{
.header{
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:10px;
margin-bottom:10px;
height:1000px;
}
.footer{
width:768px;
height:100px;
border:2px solid #000;
}
}
@media print {
.header{
position:fixed;
top:0;
left:0;
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:120px;
margin-bottom:120px;
height:1000px;
}
.footer{
position:fixed;
left:0;
bottom:0;
width:768px;
height:100px;
border:2px solid #000;
}
@page{
margin-bottom:150px;
}
}
e questa è la seconda soluzione:
In questa soluzione im utilizzando table-header-group
e table-footer-group
attributi. Funziona con Firefox e IE. Ma Chrome non capisce di nuovo. Non ripete intestazione e piè di pagina in ogni pagina in modalità stampa.
Ecco un altro codice: Is there a way to get a web page header/footer printed on every page?
<style type="text/css">
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</style>
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
C'è qualche trucco per risolvere questi problemi del tuo browser o hai qualche suggerimento a me?
No. Si compila un PDF e lo si passa al gestore di stampa oppure si vive con il comportamento predefinito. – MetalFrog
Anche io sto creando pdf ma è molto lento. Quindi voglio farlo con HTML –
utilizzando '' e '
' non ha funzionato in Chrome? –risposta
Provare a creare la pagina in tag div anziché in qualsiasi tag tabella! div è più leggero della tabella
Grazie!
fonte
2012-01-21 17:09:24 Chintan
Non mi sto consultando con la posizione! prova ad usare l'assoluto se possibile :) – Chintan
non hai capisci la mia domanda Voglio farlo in modalità di stampa per everypage –
A mio parere questo sito web che ha een api e molte opzioni come intestazione personalizzata e piè di grandi opere per la stampa:
http://pdfmyurl.com
Nel mio caso la velocità è eccellente e non cambia nulla nel layout.
Soluzione due (molto lavoro): Utilizzare il posizionamento assoluto su tutti gli elementi.
fonte
2014-07-20 05:44:54 tkon99
Problemi correlati