Increase header size pdfMake

Question

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 1

The accepted answer for this is a good one, but I thought since I found one I believe might work better for others, especially if header content length may vary, I would share.

Tables in pdfmake have a nifty feature where the header row(s) are repeated on each page the table spans. So, you can create a table that wraps your entire document, and add as many header rows as you would like, and they will be sticky throughout all pages. Here's an example doc def.

var docDefinition = {

  pageSize : 'LETTER',
  pageMargins : [25, 25, 25, 35],

  defaultStyle : {
    fontSize  : 12,
    columnGap : 20
  },

  // Page Layout

  content : {

    // This table will contain ALL content
    table : {
      // Defining the top 2 rows as the "sticky" header rows
      headerRows: 2,
      // One column, full width
      widths: ['*'],
      body: [


        // Header Row One
        // An array with just one "cell"
        [
          // Just because I only have one cell, doesn't mean I can't have
          // multiple columns!
          {
            columns : [
              {
                width    : '*',
                text     : 'Delivery Company, Inc.',
                fontSize : 12,
                bold     : true
              },
              {
                width     : '*',
                text      : [
                  { text: 'Delivery Slip\n', fontSize: 12 },
                  { text: 'Date ', bold: true },
                  '2/16/2015   ',
                  { text: 'Arrived ', bold: true },
                  '11:05 AM   ',
                  { text: 'Left ', bold: true },
                  '11:21 AM'
                ],
                fontSize  : 10,
                alignment : 'right'
              }
            ]
          }
        ],


        // Second Header Row

        [
          {
            columns: [
              {
                width: 'auto',
                margin: [0,0,10,0],
                text: [
                  { text: 'CUSTOMER\n', fontSize: 8, bold: true, color: '#bbbbbb' },
                  { text: 'John Doe', fontSize: 12 }
                ]
              },
              {
                width: 'auto',
                margin: [0,0,10,0],
                text: [
                  { text: 'INVOICE #\n', fontSize: 8, bold: true, color: '#bbbbbb' },
                  { text: '123456', fontSize: 12 }
                ]
              }
            ]
          }
        ],

        // Now you can break your content out into the remaining rows.
        // Or you could have one row with one cell that contains
        // all of your content

        // Content Row(s)

        [{
          fontSize: 10,
          stack: [

            // Content

            { text:'this is content', pageBreak: 'after' },
            { text:'this is more content', pageBreak: 'after' },
            { text:'this is third page content' }
          ]
        }],

        [{
          fontSize: 10,
          stack: [

            // Content

            { text:'this is content', pageBreak: 'after' },
            { text:'this is more content', pageBreak: 'after' },
            { text:'this is third page content' }
          ]
        }]


      ]
    },


    // Table Styles

    layout: {
      hLineWidth: function(i, node) { return (i === 1 || i === 2) ? 1 : 0; },
      vLineWidth: function(i, node) { return 0; },
      hLineColor: function(i, node) { return (i === 1 || i === 2) ? '#eeeeee' : 'white'; },
      vLineColor: function(i, node) { return 'white' },
      paddingBottom: function(i, node) {
        switch (i) {
          case 0:
            return 5;
          case 1:
            return 2;
          default:
            return 0;
        }
      },
      paddingTop: function(i, node) {
        switch (i) {
          case 0:
            return 0;
          case 1:
            return 2;
          default:
            return 10;
        }
      }
    }
  },


  // Page Footer

  footer : function(currentPage, pageCount) {
    return {
      alignment : 'center',
      text      : currentPage.toString() + ' of ' + pageCount,
      fontSize  : 8
    }
  },

};

Answer 2

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