Display different header and footer for content overlapped page

Priyank Khunt

unread,

Nov 25, 2016, 11:57:10 PM11/25/16

to dompdf

Hi,

My problem is clear I am trying to generate PDF from HTML content.

Actually everything is working fine HTML structure is displaying fine in PDF.

But the problem is I have a 4 pages of pdf document and for the main page (first page) designed header text with logo but I want to set different header text for the next page which is break down because of content overlapping.

Please help me if have any idea.

BrianS

unread,

Nov 28, 2016, 1:35:40 PM11/28/16

to dompdf

You can avoid content overlap by pushing your header into the page margins using negative positioning, e.g.:

<style>
@page { margin: 100px 50px; }
.header { position: fixed; top: -100px; left: -50px; right: -50px; height: 100px; background-color: blue; }
</style>
<div class="header">...</div>

Using a different header depending on the page is a bit more difficult. Unless you know where the page breaks occur. Absolute and fixed position content is displayed starting on the page on which it is encountered during rendering. For example, if you put positioned content after the normal content in your HTML source it will show on the last page. Absolute content is only displayed on the current page, fixed content on the current page and any following pages. So...if you know where page 2 starts you can specify your page-one header using absolute positioning and your page-two+ header using fixed positioning.

Priyank Khunt

unread,

Nov 29, 2016, 10:30:16 PM11/29/16

to dom...@googlegroups.com

Hi Brian,

Thanks for your support. I tried your techniqe and its really working, but still have a situation like paging in footer.

I know it might be difficult but may be you have solution.

My exact problem is I have 3 pages of document in that
1) first two pages are separated with page group and page data will be static so i can identify pages.
2) third page having dynamic description so it might be content overlapping and may be it can be dividing in two or three pages.

I have to set page number in footer like:
Page 1 of 2, Page 2 of 2

Please help me if you have any suggestions.

--
You received this message because you are subscribed to the Google Groups "dompdf" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dompdf+unsubscribe@googlegroups.com.
To post to this group, send email to dom...@googlegroups.com.
Visit this group at https://groups.google.com/group/dompdf.
For more options, visit https://groups.google.com/d/optout.

BrianS

unread,

Nov 30, 2016, 1:28:44 PM11/30/16

to dompdf

OK, so you're all set on the first two pages. On the last content section (page 3+) it's a bit trickier. Dompdf does not currently support putting the total page count in using CSS. You can easily get "Page X" but not "Page X of Y" using this method.

So first let's tackle the overlapping content. Dompdf defines the document viewbox based on the page dimensions. So if you specify a margin you can put your header/footer into that margin to avoid overlapping the content. You can do this using just CSS (colors/borders used to highlight content):

<html>
<head>
  <style>
  @page {
    margin: 150px 50px;
  }
  .header {
    position: fixed;
    top: -50px;
    left: 0px;
    right: 0px;
    height: 50px;
    overflow: hidden;
    background-color: orange;
  }
  </style>
</head>
<body>


  <div class="header">...</div>


  <!-- content goes here -->
</body>
</html>

If you want to add the page number to that you can also just use CSS (colors/borders used to highlight content):

<html>
<head>
  <style>
  @page {
    margin: 150px 50px;
  }
  body {
    border: 2px solid black;
  }
  .footer {
    position: fixed;
    bottom: -50px;
    left: 0px;
    right: 0px;
    height: 50px;
    overflow: hidden;
    background-color: orange;
  }
  .pagenum:after {
    content: counter(page);
  }
  </style>
</head>
<body>
  <div class="footer">
    Page <span class="pagenum"></span>
  </div>
  <!-- content goes here -->
</body>
</html>

So then how to add the total number of pages ... not so easy. One way you could figure out how many pages are generated would be to render the PDF twice. The first time you capture the number of pages and then feed that into the document. That's not very efficient but is probably the easiest method.

Another way would be to use the Canvas page_text method. The main drawback is that this method requires precise placement of the text. However, this being footer content you should be able to figure out the appropriate placement using a little trial and error. You can set up the header background and other text in the HTML, then just call the appropriate canvas methods during render:

$dompdf->loadHtml($html);
$dompdf->render();
 $font = $dompdf->getFontMetrics->getFont("Arial", "bold");
$pdf->page_text(770, 580, "Page {PAGE_NUM} of {PAGE_COUNT}", $font, 10, array(0, 0, 0));
$dompdf->stream();

Last method you might be able to use is a combination of CSS and embedded script. But I'd have to think this through a bit more. to figure it out.

On Tuesday, November 29, 2016 at 10:30:16 PM UTC-5, Priyank Khunt wrote:

Hi Brian,

Thanks for your support. I tried your techniqe and its really working, but still have a situation like paging in footer.

I know it might be difficult but may be you have solution.

My exact problem is I have 3 pages of document in that
1) first two pages are separated with page group and page data will be static so i can identify pages.
2) third page having dynamic description so it might be content overlapping and may be it can be dividing in two or three pages.

I have to set page number in footer like:
Page 1 of 2, Page 2 of 2

Please help me if you have any suggestions.

Priyank Khunt

unread,

Dec 7, 2016, 7:50:16 AM12/7/16

to dom...@googlegroups.com

Hi Brian,

I am happy to say that I have done my job as I required. I achieve my requirement successfully.

It was tricky for allow page number in page group but I handle this thing.

I want to share that how I am done:

1) Every pages are dynamic but I know that from where page group will started.

2) Create each PDF file by page group wise. (It is not efficient for the large scale but for me it is fine.)

3) Last step merge every PDF into one PDF using PDFMerger library.

However, one last issue I am facing is that when page break on overlapped content I am using

page-break-inside: avoid;

style for avoid from page break inside the single element.

Exact issue is when I use this style it generate new blank page instead start from next page.

I really appreciate your support thanks.

--

You received this message because you are subscribed to the Google Groups "dompdf" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dompdf+unsubscribe@googlegroups.com.
To post to this group, send email to dom...@googlegroups.com.
Visit this group at https://groups.google.com/group/dompdf.
For more options, visit https://groups.google.com/d/optout.

--

Thanks & Regards

Priyank Khunt

unread,

Dec 20, 2016, 2:31:14 AM12/20/16

to dom...@googlegroups.com

Hi Brian,

Can you please help me regarding above issue.

Thanks in advance.

BrianS

unread,

Feb 3, 2017, 6:18:41 PM2/3/17

to dompdf

I let this slip by and now it's been a while, but if you still need help post back and I'll take another look.

On Tuesday, December 20, 2016 at 2:31:14 AM UTC-5, Priyank Khunt wrote:

Hi Brian,

Can you please help me regarding above issue.

Thanks in advance.

Thanks & Regards
Priyank Khunt

Kapil Patel

unread,

Jul 31, 2017, 9:21:46 AM7/31/17

to dompdf

Hi

my problem is:

i creating pdf but i want footer at bottom of page.but condition is if page content is big then footer will display at second page @ last.

please help me

BrianS

unread,

Jul 31, 2017, 10:51:50 AM7/31/17

to dompdf

Since this is an older post and your question isn't directly related to it you should start a new one (just FYI).

Here's a quick answer, but if you need more help go ahead and start a new post.

If I understand correctly, you only want the footer to show on the last page of the document? The way Dompdf parses header/footer content (e.g. using elements styled with fixed position) it will only show starting with the page on which it is defined. So if you define your footer after the content of the page it should only show on the last page.

Mahadeva Reddy

unread,

Aug 29, 2018, 9:44:00 AM8/29/18

to dompdf

Hi Priyank,

Add these properties in your class this works in firefox i'm also looking solution in chrome as well in ie.

.class:after{

counter-increment: page;

content: "Page " counter(page) " of " counter(pages);

To unsubscribe from this group and stop receiving emails from it, send an email to dompdf+un...@googlegroups.com.

Reply all

Reply to author

Forward