d1sciple d1sciple - 7 months ago 479
Javascript Question

Increase header size pdfMake

I am trying to increase the header size on a pdf using pdfmake.

Currently am able to get a header on both the left and right of the page, which is what I want, but when the height passes 26, the image disappears because there is a limited amount of space for the header.


  • The margin can be decreased to increase the size but i want the
    margin to remain.

  • I've searched pdfMake github for similar issues with no success.



If you need to test anything, try the code I have so far on
pdfmake playground

Keep in mind you will need to copy and paste all this code on the "playground" to make it work.

var dd = {
pageSize: 'LEGAL',
pageOrientation: 'landscape',
header: {
margin: 8,
columns: [{
table: {
widths: ['50%', '50%'],
body: [
[{
image: 'sampleImage.jpg',
width: 80,
height: 26,
}, {
image: 'sampleImage.jpg',
width: 80,
height: 26,
alignment: 'right'
}]
]
},
layout: 'noBorders'
}]
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}

Answer

You need to add a pageMargins and adjust the second parameter (top margin) to your total header size. You can try values until you get all header content visible.

For example:

In this case, I use 80 (pageMargin: [40,80,40,60]) to get the image with height 60

var dd = {

    pageSize: 'LEGAL',
    pageOrientation: 'landscape',
    pageMargins: [40, 80, 40, 60],

    header: {
        margin: 8,
        columns: [
            {
                table: {
                    widths: [ '50%','50%'],

                    body: [
                        [
                            { image: 'sampleImage.jpg',

                                width: 80, height: 60,

                            },

                            { image: 'sampleImage.jpg',

                                width: 80, height: 60,
                                alignment:'right'}
                        ]
                    ]
                },
                layout: 'noBorders'
            }

        ]
    },

    content: [
        'First paragraph',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ]
}