Pdfmake: Adding page number and image to Footer

[OwaisQureshi]

I'm struggling with this issue, I want to add page number and image to the footer.
I can only do one at a time either page number or image.
here is the code im working with,

                footer: function (currentPage, pageCount) {
                    return { text: "Page " + currentPage.toString() + ' of ' + pageCount, alignment: 'right', style: 'normalText', margin: [0, 20, 50, 0] }
                },
                //footer:
                //{
                //    columns: [
                //        { image: footerImg, alignment: 'center', fit: [400, 400] }
                //    ],
                //},`

[dorothythurston]

Hmmm I have not tried this code out but are you sure your footer has enough space on the page to display the image? I ran into trouble with my own footer not displaying something because I did not have enough space on the page for it.

[liborm85]

Simple example how to add image and text to footer:

var dd = {
    pageMargins: [ 40, 40, 40, 100 ],
    footer: function (currentPage, pageCount) {
        return {
            table: {
                body: [
                    [
                        { image: 'sampleImage.jpg', alignment: 'center', fit: [400, 400] },
                        { text: "Page " + currentPage.toString() + ' of ' + pageCount, alignment: 'right', style: 'normalText', margin: [0, 20, 50, 0] }
                    ],
                ]
            },
            layout: 'noBorders'
        };
    },
    content: [
        {text: 'Text', pageBreak:'after'},
        {text: 'Text', pageBreak:'after'},
        {text: 'Text', pageBreak:'after'},
    ]
}

By pageMargins you can set margin size for footer.

[OwaisQureshi]

Thanks @liborm85, I made these changes,

                footer: function (currentPage, pageCount) {
                    return {
                        table: {
                            widths: [500],
                            //margin: [50, 0, 0, 0],
                            body: [
                                [
                                    // [left, top, right, bottom]
                                    { text: "Page " + currentPage.toString() + ' of ' + pageCount, alignment: 'right', style: 'normalText', /*margin: [0, 0, 0, 0]*/ }
                                ],
                                [
                                    { image: footerImg, alignment: 'center', fit: [400, 400], margin: [150, 0, 0, 0] }
                                ],
                            ]
                        },
                        //layout: 'noBorders'
                    };
                },

Not sure how to centre align the image, although I can use left align value to adjust image in centre, but that's not a nice solution.

[liborm85]

Example:

var dd = {
    pageMargins: [ 40, 40, 40, 150 ],
    footer: function (currentPage, pageCount) {
        return {
            table: {
                widths: '*',
                body: [
                    [
                        { text: "Page " + currentPage.toString() + ' of ' + pageCount, alignment: 'right', style: 'normalText', margin: [0, 20, 50, 0], aligment: 'left' }
                    ],
                    [
                        { image: 'sampleImage.jpg', alignment: 'center', width: 200 },
                    ]
                ]
            },
            layout: 'noBorders'
        };
    },
    content: [
        {text: 'Text'}
    ]
}