Search code examples
javascriptpdfmake

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'
  ]
}

Solution

  • 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'
        ]
    }