Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/bpampuch/pdfmake/llms.txt

Use this file to discover all available pages before exploring further.

pdfmake gives you full control over the repeating elements that appear on every page of your document. Headers, footers, background layers, and watermarks can all be defined once in the document definition and pdfmake will render them automatically on each page — with access to the current page number, total page count, and page dimensions so you can make them truly dynamic. The header and footer properties sit at the top level of your document definition. Each can be either a static content node (a string, an object, or an array) or a function that receives the current page number, total page count, and page size, then returns a content node.
// Static header — same text on every page
const docDefinition = {
  header: 'My Document Title',
  content: ['Page content here']
};
// Dynamic header using a function
const docDefinition = {
  header: function (currentPage, pageCount, pageSize) {
    return {
      text: 'Page ' + currentPage + ' of ' + pageCount,
      alignment: 'right',
      margin: [0, 10, 20, 0]
    };
  },
  content: ['Page content here']
};
The function signature is (currentPage, pageCount, pageSize) => content. The pageSize argument is an object with width and height properties, which is useful when your document mixes page sizes or orientations.
Headers and footers are rendered outside the page margins. Use the margin property on the returned content node to position them correctly within the printable area.

Returning Arrays from Header/Footer Functions

You can return any valid pdfmake content node — including an array of items or a complex layout object — from a header or footer function.
const docDefinition = {
  header: function (currentPage, pageCount) {
    return [
      { text: 'My Company', bold: true, margin: [40, 15, 0, 0] },
      {
        canvas: [{ type: 'line', x1: 40, y1: 0, x2: 555, y2: 0, lineWidth: 1 }]
      }
    ];
  },
  footer: function (currentPage, pageCount) {
    return {
      columns: [
        { text: 'Confidential', alignment: 'left', margin: [40, 0] },
        { text: currentPage + ' / ' + pageCount, alignment: 'right', margin: [0, 0, 40, 0] }
      ]
    };
  },
  content: ['Document body']
};

Conditional Headers by Page

Because the header and footer are functions, you can skip them on specific pages by returning null or an empty string.
const docDefinition = {
  header: function (currentPage) {
    // No header on the first (cover) page
    if (currentPage === 1) return null;
    return { text: 'My Report', margin: [40, 10] };
  },
  content: ['Cover page', { text: 'Chapter 1', pageBreak: 'before' }]
};

Background Layer

The background property lets you render content behind the main page content on every page. Like header and footer, it accepts a static value or a function — (currentPage, pageSize) => content.
const docDefinition = {
  background: function (currentPage, pageSize) {
    // Skip background on page 2
    if (currentPage === 2) return null;

    return [
      'Background paragraph on page ' + currentPage,
      'Another background paragraph',
      { image: 'logo', width: 200 }
    ];
  },
  content: ['First paragraph', /* ... */],
  images: {
    logo: 'data:image/png;base64,...'
  }
};
Background content is drawn first, so your main content appears on top of it.

Watermarks

A watermark is diagonal text stamped across every page. Define it using the watermark property directly on the document definition.
// Simple string watermark
const docDefinition = {
  watermark: 'DRAFT',
  content: ['Document content']
};
For full control over styling, pass an object with the following fields:
text
string
required
The watermark text to display.
font
string
Font family name. Defaults to the document default font (e.g. 'Roboto').
fontSize
number
Font size in points. pdfmake auto-scales if omitted.
bold
boolean
Whether to render the text bold.
italics
boolean
Whether to render the text in italics.
color
string
CSS color string (e.g. 'blue', '#FF0000').
opacity
number
Opacity between 0 (invisible) and 1 (fully opaque). Values like 0.3 work well for watermarks.
angle
number
Rotation angle in degrees. Defaults to a diagonal angle if omitted.
// Styled watermark from watermark.js
const docDefinition = {
  watermark: { text: 'test watermark', color: 'blue', opacity: 0.3, bold: true, italics: false },
  content: [
    'Test page of watermark.\n\n',
    'Lorem ipsum dolor sit amet...'
  ]
};

Document Sections

pdfmake supports sections — groups of pages within a document that each carry their own header, footer, background, watermark, page size, orientation, and margins. Sections let you have a landscape chart section inside an otherwise portrait report, or a title page with no header at all. Sections live inside the content array as objects with a section key containing their page content:
const docDefinition = {
  // Document-level defaults — applied when a section doesn't override
  header: function () { return 'default header'; },
  footer: function () { return 'default footer'; },
  background: function() { return { text: 'global background', alignment: 'right' }; },
  watermark: 'default watermark',

  content: [
    // Section 1 — inherits all document-level settings
    {
      section: [
        'SECTION 1',
        'Text in section.'
      ]
    },

    // Section 2 — overrides header, footer, background, watermark, and orientation
    {
      header: function (currentPage, pageCount) {
        return 'header: ' + currentPage.toString() + ' of ' + pageCount;
      },
      footer: function (currentPage, pageCount) {
        return 'footer: ' + currentPage.toString() + ' of ' + pageCount;
      },
      background: function() { return { text: 'SECTION 2 background', alignment: 'right' }; },
      watermark: 'SECTION 2 watermark',
      pageOrientation: 'landscape',
      section: [
        'SECTION 2',
        'Text in section as landscape page.'
      ]
    },

    // Section 3 — explicitly clears header, footer, background, and watermark
    {
      header: null,
      footer: null,
      background: null,
      watermark: null,
      pageSize: 'A7',
      pageOrientation: 'portrait',
      section: [
        'SECTION 3',
        'Text in section as A7 page.'
      ]
    },

    // Section 4 — 'inherit' reuses the previous section's watermark
    {
      watermark: 'inherit',
      pageSize: 'A6',
      pageOrientation: 'portrait',
      pageMargins: 5,
      section: [
        'SECTION 4',
        'Text in section as A6 page with margin.'
      ]
    }
  ]
};

Section Property Inheritance

Override with a value

Set header, footer, background, or watermark to a new value (or function) to replace the document-level default for that section’s pages.

Suppress with null

Set any of these to null to disable them entirely for that section, even if the document defines a default.

Inherit from previous

Set any of header, footer, background, or watermark to 'inherit' (or pageSize: 'inherit', pageOrientation: 'inherit', pageMargins: 'inherit') to reuse whatever the previous section used.

Fall through to document

Omitting a property causes the section to fall back to the document-level setting automatically.
Sections also accept pageSize, pageOrientation, and pageMargins, giving you full control over the physical layout of each section’s pages.

Build docs developers (and LLMs) love