Tworzenie nagłówków i stopek stron przy użyciu CSS do drukowania
Tworzę plik PDF używając latającego spodka (który wyrzuca CSS / HTML do iText do pliku PDF) i próbuję użyć CSS3, aby zastosować nagłówek obrazu i stopkę do każdej strony.
W zasadzie chciałbym umieścić ten div w lewym górnym rogu każdej strony:
<div id="pageHeader">
<img src="..." width="250" height="25"/>
</div>
Mój CSS wygląda mniej więcej tak:
@page {
size: 8.5in 11in;
margin: 0.5in;
@top-left {
content: "Hello";
}
}
Czy jest jakiś sposób na umieszczenie tego div w content
? 3 answers
Umieszczanie elementu na górze każdej strony:
@page {
@top-center {
content: element(pageHeader);
}
}
#pageHeader{
position: running(pageHeader);
}
Zobacz http://www.w3.org/TR/css3-gcpm/#running-elements (działa w latającym spodku)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-16 18:02:06
Aby umieścić zarówno nagłówek, jak i stopkę na stronach (opracowując doskonałą odpowiedź od @ Adam):
<style>
@page {
margin: 100px 25px;
size: letter portrait;
@top-left {
content: element(pageHeader);
}
@bottom-left {
content: element(pageFooter);
}
}
#pageHeader{
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
</style>
<body>
<header id="pageHeader">something from above</header>
<footer id="pageFooter">lurking below</footer>
<div>meaningful rambling...</div>
</body>
uwaga: aby stopka powtarzała się na każdej stronie, może być konieczne zdefiniowanie jej przed inne treści (dla zawartości wielostronicowej)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-29 22:08:39
Spędziłem dużo czasu, aby to uruchomić na nowoczesnych Chrome, Firefox i Safari. Używam tego do tworzenia PDF z HTML. Nagłówek i stopka zostaną przymocowane do każdej strony bez nakładania się na zawartość strony. Spróbuj:
CSS
<style>
@page {
margin: 10mm;
}
body {
font: 9pt sans-serif;
line-height: 1.3;
/* Avoid fixed header and footer to overlap page content */
margin-top: 100px;
margin-bottom: 50px;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
/* For testing */
background: yellow;
opacity: 0.5;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
font-size: 6pt;
color: #777;
/* For testing */
background: red;
opacity: 0.5;
}
/* Print progressive page numbers */
.page-number:before {
/* counter-increment: page; */
content: "Page: " counter(page);
}
</style>
HTML
<body>
<header id="header">Header</header>
<footer id="footer">footer</footer>
<div id="content">
Here your long long content...
<p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
</div>
</body>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-30 17:27:39