Add multiple element in header pdfmake

Question

I am making a sales invoice pdf using pdfmake. I want to put my company logo, and company details such as name, contact number, email, website etc in the header of the pdf document. I tried

header: "document header"

var docDefinition = {
  header: 'simple text',

  footer: {
    columns: [
      'Left part',
      { text: 'Right part', alignment: 'right' }
    ]
  },

  content: (...)
};

I can only add one pdfmake element. I want to add multiple-element in the header (and footer) of the document. Is it possible to add multiple-element? Is there any alternative way to achieve this?

[1] https://pdfmake.github.io/docs/document-definition-object/headers-footers/

I tried example from above url[1]. it doesn't mention multiple elements.

Answer 1

Just to throw this out there... I couldn't get the multi-element header to work with the example syntax on the pdf-make website. I think the custom header function requires a single-element return containing a columns array, not the content array itself.

docDefinition = {
  header: function(currentPage, pageCount, pageSize) {
    // computations...
    return {
      columns: [
        { text: 'My Title!', /* extra style attributes */},
        { text: 'My Subtitle!', /* extra style attributes */},
      ],
    };
  },
  footer: 'blah blah blah',
  content: [],
};

Answer 2

For adding multiple elements in header , you have to adjust page margin. It can be done as follow:

             pageMargins: [ 40, 60, 40, 60 ],

You can change these values according to your requirements.

Answer 3

To add multiple elements (text, image, etc), you will need to add a customize function in your js. Example like below

customize: function (pdf) {
  pdf['header']=(function() {
   return {
    columns: [
      {
       image: /*convert your image into base64 code and paste the code here to make the image work*/,
       width: 10,
       margin: [left, top, right, bottom]
      },
      {
       text: ['Company Name\n Company Contact\n'],
       bold: true, 
       alignment: 'center', 
       fontSize: 14, 
       margin: [L, T, R, B]
      },
      {
        text: ['Company Email\n Company website\n'], 
        bold: true, 
        fontSize: 14, 
        margin: [L, T, R, B]
      }
    }
});
}

If you want to add for footer, you can just add another function for footer like

pdf['footer']=(function(){
      {
        text: ['Footer'], 
        bold: true, 
        fontSize: 14, 
        margin: [L, T, R, B]
      }
});