Is it possible to change header text for each page?

[jchabot86]

I want to be able to alter the text of the header depending on the data I am using to populate the PDF. This is something else other than changing the page number/page count.

[tcsaddul]

The header can be be populated with any data before creating it.  Here is what i do in typescript.
       header(currentPage: number, pageCount: number) {
            return {
                columns: [
                    [
                        { text: this.company, alignment: "left", margin: [40, 25, 0, 0] },
                        { text: this.address, alignment: "left", margin: [40, 0, 0, 0] },
                    ],
                    [
                        { text: this.title, alignment: "right", margin: [0, 25, 40, 0] },
                        { text: this.subTitle, alignment: "right", margin: [0, 0, 40, 0] },
                    ]
                ]
            };
        }

On Friday, November 18, 2016 12:03 AM, Jon <notifications@github.com> wrote:

I want to be able to alter the text of the header depending on the data I am using to populate the PDF. This is something else other than changing the page number/page count.—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[bobisch]

@tcsaddul - Are you saying that does not work? I suspect it does not. this is going to be the Service (or maybe Controller) you are defining header() in, but it only gets called after you have done all of the processing to create your documentDefinition, so title and subTitle will never change.

The only way I have been able to sort-of get something like this to work is to create an array indexed by what I think will be the page number and then use something like { text: myInfo[currentPage-1].sectionTitleText, ... }. Of course this only works if nothing ever overflows a page boundary.

Does anyone have a better way to do something like this?

[arjenzwerver]

Yes, I have!

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;
                    }

@bobisch

[liborm85]

duplicate: #178