Skip to content

Instantly share code, notes, and snippets.

@reedho

reedho/README.md

Created October 25, 2023 12:11
Show Gist options
  • Save reedho/074331d2c4cfcd42df07dc366be92c68 to your computer and use it in GitHub Desktop.
Save reedho/074331d2c4cfcd42df07dc366be92c68 to your computer and use it in GitHub Desktop.
Download ZIP
OpenHTmlToPdf Running Header & Footer
Raw
README.md

Note

  • Perhatikan posisi element .copyright menentukan apakah akan diulang untuk setiap page, atau misal setelah halaman tertentu saja, karena content nya aktif/tersedia pada saat dia sudah terbaca. Jika dia posisi nya di paling atas body content, maka ia akan diulang untuk setiap page, jika berada paling bawah, maka akan muncul di halaman terakhir saja.

  • Referensi lengkap nya di https://www.w3.org/TR/css-gcpm-3/#running-elements.

Raw
template.html
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="openhtmltopdf is great!" />
<title>FEATURE DEMO</title>
<style>
@page {
size: letter;
margin: 2cm;
@top-right {
content: "Page " counter(page) " of " counter(pages);
border: 1px solid red;
vertical-align: top;
padding-top: 1cm;
}
@bottom-left {
content: element(footer-copyright);
border: 1px solid green;
vertical-align: bottom;
padding-bottom: 1cm;
}
}
.copyright {
position: running(footer-copyright);
}
</style>
</head>
<body>
<div class="copyright">&copy; 2023</div>
<h1>Hello</h1>
<p>This is great start!</p>
<h1 style="page-break-before: always">There</h1>
<p>Hi, let me know you?</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment