Pdfmake: Dynamic headers and footers

[mevillep]

I am passing an array of multiple objects to my docDefinition Object. I am wanting to put dynamic data for the headers and footers from these multiple objects.

Footer code:

docDefinition.footer = function (page, pages) {
return {
style: 'fRepeat',
table: {
widths: [250, 300, 250, 302],
body: [
[Send Correspondence to Buyer,key.buyerName, Buyer Email, key.buyerEmailAddress],
[Sourcing Signature/Date, some text1, Supplier Signature/Date, some text 2]
]
}
}

 }

Above, the key.buyerName and key.buyerEmailAddress are present in every object that I pass to docDefinition. Hence, I want the footer to be unique per object passed.
Example, If I pass 3 objects to the docDefinition, I am expecting to get 3 pdf's with unique footer data on each one of them.
Instead what I observe is that the footer data on the third object is repeated on all the three pdf's.

P.s.: I got rid of quotes around the text in the code above.
Kindly help. @bpampuch

[liborm85]

I can not simulate your problem, can you do some example executable on http://pdfmake.org/playground.html ?

[mevillep]

https://plnkr.co/edit/v1jSWfulweS3vMflg2j1?p=catalogue

This is the link to the plunker. I am not sure if playground could persist the changes.
Anyway, Look at the data in my headers and footers. The footer takes the data from the first Object, and the headers take data from the last object. All the other data that is consumed ex. tables , text etc is rendered perfectly.
@bpampuch
@liborm85 @hujhax

[arjenzwerver]

I was also facing this problem and solved it with something like this:

docDefinition.content.push({
                            text: aText,
                            fontSize: 18,
                            bold: true,
                            italics: true,
                            pageHeaderText: yourHeaderText
                        });

Next, the header function should look something like this:

docDefinition.header = function(currentPage){
                        var rightText = "";
                        for(var l = 0; l < docDefinition.content.length; l++){
                            if(docDefinition.content[l].pageHeaderText && currentPage >= docDefinition.content[l].positions[0].pageNumber){
                                rightText = docDefinition.content[l].pageHeaderText;
                            }
                        }
                        var headerObj = {
                            columns: [
                                {
                                    stack: [
                                        {
                                            image: 'Logo',
                                            width: 100
                                        }
                                    ],
                                    alignment: 'left',
                                    width: 200
                                },
                                {
                                    text: rightText,
                                    color: '#666666',
                                    alignment: 'right',
                                    width: '*',
                                    margin: [0, 12]
                                }
                            ],
                            margin: [40, 20]
                        };
                        return headerObj;
                    }

@mevillep

[mevillep]

@arjenzwerver Thanks for the answer. It didn't help though. the header repeats itself whatsoever.

[jfaquinojr]

@arjenzwerver: docDefinition.content[l].positions doesnt seem to exist. did you add it manually yourself?

[arjenzwerver]

@jfaquinojr: No, but it is only available during/after pdfMake.createPdf(docDefinition) is called. Maybe you could check if the function is running before createPdf is called or not. For example through console.log.

[liborm85]

Feature request: https://github.com/bpampuch/pdfmake/issues/283

[dhyey35]

@arjenzwerver Thanks !! Works Great :)

[tedbakers]

This is a good answer, I used that pageHeaderText (renamed to pageHeader) and stored a stringified json object in it then in the header function JSON.parse that and replaced in any page numbers and returned the object, works well! Thanks!

Did the same for footers!

[adityavartak91]

Is it possible in PDFMake to display a small content first and then start with Page Header which will repeat in every page

[tedbakers]

Is it possible in PDFMake to display a small content first and then start with Page Header which will repeat in every page

You should be able to do this using the method described by arjenzwerver above to get different headers, you'd just put that small content in the header for the page you want, you will probably need to increase the margins to get this to display correctly though, you'll just have to experiment.

[MildTomato]

I've just implemented this today, using what @arjenzwerver suggested.

You can also use this to build up an object of page numbers for each unique header you use, so you can calculate the length of pages for each section.

[wayneathomas]

I used @arjenzwerver method and it worked perfectly.

[boldham31]

Thanks @arjenzwerver and all for your responses. Very helpful for me in solving this. I wanted to also show my solution for how I got this working. I just needed to make two things dynamic - the page number in the footer, and the page title in the header. And then style header and footer uniquely. Here is what my header and footer look like within the docDefinition object.

header: function(currentPage) { var headers = ['SUMMARY', 'LEAK 1', 'LEAK 2', 'LEAK 3']; return [ { margin: [ 30, 30, 0, 30 ], table: { widths: ['50%', '50%'], heights: [ 30 ], body: [[{ text: headers[currentPage-1], style: 'leftHeader' }, { text: "", style: 'filledHeader' }]] }, layout: 'noBorders', } ] }

footer: function(currentPage) { return [ { table: { widths: ['10%', '90%'], heights: [ 30 ], body: [[{ text: currentPage.toString(), style: 'leftFooter' }, { text: "", style: 'filledHeader' }]] }, layout: 'noBorders', } ] }

And then the aforementioned leftHeader, leftFooter, and filledHeader styles are defined later on in my docDefinition object. Hope this helps someone!