Common Use Cases
To ensure maximum compatibility you should follow all of the following steps. Click through for additional details.
- Header and Footer
- Generated Content (e.g. page numbers)
- Custom HTTP Stream Context
Elements style with position: fixed are rendered similar to absolutely positioned content, with the addition that they are rendered on every page.
<html>
<head>
<style>
#header {
position: fixed;
left: 0px; top: 0px; right: 0px; height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="header"></div>
</body>
</html>
Take note that the placement of absolute or fixed positioned elements is based on the document content box (i.e. the page minus the margins). If you position an element at [0, 0, 0] as in the above example the header may cover content. To avoid this the header or footer should be shifted into the page margins.
<html>
<head>
<style>
@page {
margin: 100px 50px;
}
#header {
position: fixed;
left: -50px; top: -100px; right: -50px; height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="header"></div>
<p>some content</p>
</body>
</html>
Finally, Dompdf renders content as it is encountered in the HTML source and Dompdf does not rewind to previous pages during rendering. Content is rendered forward-only (current page plus future pages). Headers/footers that need to be rendered on all pages should be at the top of the HTML source.
<html>
<head>
<style>
#header {
position: fixed;
left: 0px; top: 0px; right: 0px; height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<p style="page-break-after: always;">some content</p>
<div id="header"></div>
</body>
</html>
CSS generated content can be used in combination with CSS counters to display the current page number. A bundled "page" counter can be used to retrieve the current page number.
<html>
<head>
<style>
.page_number:before {
content: "Page " counter(page);
}
</style>
</head>
<body>
<p style="page-break-after: always;"><span class="page_number"></span></p>
<p><span class="page_number"></span></p>
</body>
</html>
Dompdf does not currently support generating the total number of pages using CSS. In order to generate that content you have to utilize the Canvas API to render an object on every page after Dompdf has completed it's rendering.
See the Dompdf API documentation for more details on using the API.
You can supply a custom HTTP stream context when you need to modify the defaults. This is useful for doing such things as adding a basic authentication header.
$auth = base64_encode("username:password");
$context = stream_context_create(array(
'http' => array(
'header' => "Authorization: Basic $auth"
)
));
$dompdf->setHttpContext($context);
The same context is used for all HTTP requests made by Dompdf. Customizing the context only works for files retrieved using file_get_contents, which is the default when the allow_url_fopen PHP setting is true.