Pdfmake: Different page headers and footers

[gnibeda]

Is there way to make different headers and footers on pages?
For example: fist document section with one page header, second - with another?
Something like this:
content: [
{header: "one"},
.....
{header: "two"},
]
That's should change header on current page.
In current version header description is placed outside "content", so I can describe it only once.

[jthoenes]

Hi @gnibeda, in the TW-QEN/pdfmake repository we are currently working on a section/subsection concept. Maybe we can do something like this

{
  footer: function(page, pages, headlines) {
     // headlines is an array of pages on that page
  }
}

Would that help you?

[gnibeda]

The main problem is that I don't know on which page footer should be. Footer is changed during content. Simply put, in one place of content I need new footers. But I don't know page number before document will be generated, because content length is varying. That's why I can't use callbacks for this.

I think the simplest way would be allowed to place footer inside content(and engine should use this footer on page where it was found and on all after, till then new footer was found).

[gnibeda]

It concerns not only headers and footers. Also we should be able to change page orientation, page margins during content description. (For example: I need one landscape page in portrait document)

[jthoenes]

Hi @gnibeda ,

Page headers and footers currently work a bit different in pdfmake. I've currently no good way to do it. But maybe you want to work on a pull request?

As for pageOrientation. See at pull request #180. This would allow you to specify a pull request like this:

{  text: 'Text on landcape', pageBreak: 'before', pageOrientation: 'landscape'}

This page margins are currently not included in there, but easily extendable.

[gnibeda]

Now I working on simple html to pdf parser and almost done it. May be we should develop plugin support, so I can include it in pdfmake? After that I'll look at problem with footers and headers.

[jthoenes]

For the html parser, please add your thoughts to #205

[cundiz]

Whats the state of this issue? I have also an request.

I want to design the first page of the PDF a little bit different to the other pages.

[bryantbiggs]

I am also curious if this is still in progress. I have a two page pdf I am generating but the headers, footers, and background between the 1st and 2nd pages have to be different. thanks!

[eldesgonzales]

I've been stucked for weeks knowing what I should do, and I just realized that what we're tweaking here is at .js, meaning you can do programming stuff here.

Here is the template on making your first page header/footer different on the other pages:

header: function(page) { 
          if (page != 1) 
                  return {text: 'Hello!'}
              else
                      return {text: 'Hi!'}
}

if you want to put more stuff on the header/footer:

footer: function(page) { 
          if (page != 1){
             return { columns: [
                    {text: '[LOGO OF CLIENT HERE]'},
                    {image: 'sampleImage.jpg', alignment: 'right', width: 50}
             ]}         
          }
}

Play it here!: http://pdfmake.org/playground.html

_NOTE: The background function is the same as the header, and the currentPage parameter is also the same as the page parameter._

I'll just post this thing incase someone stucked like me! :D

[FelipeMicali]

Yes, there is a workaround to make this work. I'm using angularjs and using a scope variable this is kind of possible to achieve.

I've noticed that the header function runs first than the footer function, and these functions are called only after the pages are generated, so you can iterate through dd.contents and retrieve any propertie from each node, including the pages that they are located.

So, if you give an id to an object in content, you can locate it's page when the header function runs for the first time and store it in a scope variable, like:

If (dd.content[i].id) $scope.breakPoints.push(
{
page: dd.content[i].positions[0].pageNumber,
id: dd.content[i].id
}
)

Than, based on the constructed scope variable, you can run filters to see where the currentPage is and with a custom function, based on the id name (and stored in an angular service), you can define different headers and footers for different page ranges.

I think this feature should be available out of the box, and I'm willing to implement it myself sometime, but this trick worslk perfectly. If not with angular, just push the objects into a global variable.

[liborm85]

Same as https://github.com/bpampuch/pdfmake/issues/283.

[Paperalien]

Hi @FelipeMicali. In the header you only get page count, current page and page Size; how are you getting the document definition object and the nodes? Have you changed pdfMake to pass that down (which is a reasonable approach)? Thanks!

[brakop]

Thanks @eldesgonzales, that is exactly what I needed to remember! Now I can control headers and footers by page, and if I put in a little more effort probably allow clients to set the dynamic content as well. Cheers!

[Anand-Paul]

Is there any way to get the current page node details in footer function?