PDFMakeDefs.md

PDF Make Definitions

A list of all the properties for the Document Definition objects in PDF Make. Gathered from the examples source code. Up to date for version 0.1.38.

Basic definition

• The Document Definition is a javascript object: {}. It can contain the following.
• content: array. This defines the layout of your document. All your tags will be defined in there. You define tags using object (e.g. content: [{text: 'Hello World'}])
• styles: object. A dictionary of all the named styles in your document. You can then apply a style to any object using style: 'name' or style: ['name1', 'name2']
• defaultStyle: object. Defines a style to be applied to every element in the document.
• images: object. Another dictionary that you can use to specify all the images in your document.
• header, footer or background: specify content to be included on every page. Can be static (e.g. header: {text: 'Hello!'}) or dynamic (e.g. footer: function(currentPage, pageCount) {...})
• watermark: string or text element. To be displayed across the page. The child text element accepts an optional 'opacity' attribute.
• pageSize: one of the following: '4A0', '2A0', 'A0', 'A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9', 'A10', 'B0', 'B1', 'B2', 'B3', 'B4', 'B5', 'B6', 'B7', 'B8', 'B9', 'B10', 'C0', 'C1', 'C2', 'C3', 'C4', 'C5', 'C6', 'C7', 'C8', 'C9', 'C10', 'RA0', 'RA1', 'RA2', 'RA3', 'RA4', 'SRA0', 'SRA1', 'SRA2', 'SRA3', 'SRA4', 'EXECUTIVE', 'FOLIO', 'LEGAL', 'LETTER', 'TABLOID'
• pageOrientation: 'portrait' or 'landscape'. Default is 'portrait'
• pageMargins: number (all margins the same), [horizontal, vertical] or [left, top, right, bottom]
• pageBreakBefore: function that can be specified to dynamically control page breaks. See the related documentation down below.
• compress: boolean. Whether or not the compress the resulting PDF document. Defaults to true.
• info: object. Metadata information for the document. Possible entries include:
  • title: the title of the document
  • author: the name of the author
  • subject: the subject of the document
  • keywords: keywords associated with the document
  • creator: the creator of the document (default is 'pdfmake')
  • producer: the producer of the document (default is 'pdfmake')
  • creationDate: the date the document was created (added automatically by pdfmake)
  • modDate: the date the document was last modified
  • trapped: the trapped flag in a PDF document indicates whether the document has been "trapped" i.e. corrected for slight color misregistrations

Styles (inline on any element or in a styles dictionary element)

• bold: boolean
• italics: boolean
• color: color name or HEX, e.g.: 'black' or '#000000'
• background: color name or HEX, e.g.: 'black' or '#000000'
• font: string. The name of the font to use. Must be defined in the pdfMake.fonts dictionary before render. (See https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side)
• fontSize: number
• fontFeatures: string or array. See https://docs.microsoft.com/en-ca/typography/opentype/spec/featurelist
• lineHeight: number. Defines the spacing between lines inside a paragraph, e.g. 1.0, 1.5, 2.0
• preserveLeadingSpaces: boolean
• decoration: 'underline', 'overline' or 'lineThrough'
• decorationStyle: 'dashed', 'dotted', 'double' or 'wavy'
• decorationColor: color name or HEX, e.g.: 'black' or '#000000'
• alignment: 'left', 'right', 'center' or 'justify', default 'left'
• margin: number (all margins the same), [horizontal, vertical] or [left, top, right, bottom]
• absolutePosition: {x: number, y: number}
• relativePosition: {x: number, y: number}
• pageBreak: 'before' or 'after'

Inline text (text tag)

• Most basic notation is a string (e.g. 'Hello World'). However using it like this you cannot apply styles to it.
• Using the text tag, you can add properties and styles to the text (e.g. {text: 'Hello World', bold: true})
• The text tag can be set to an array to refine the styling (e.g. {text: ['Hello ', {text: 'World', bold: true}]})
• id: string containing a unique identifier for the text element (see pageReference or textReference).
• tocItem: boolean. Specifies if this element should be included in a table of contents.
• tocStyle: object. Style to be applied to the table of contents element.
• tocMargin: array or number (see margin). Margin to be applied to the table of contents element.
• link: string. Specify an url to turn the text into a link.
• linkToPage: number. Specify a page number to turn the text into a link to that page.

Paragraph text or group of elements (stack tag)

• Has to be set as an array. Can receive inline or named styles.

Columns (columns tag)

• Defined as an array of objects: {columns: [{col1}, {col2}, {coln}]} where each object is a separate column.
• width: (fixed size: number), '*' (equal sized) or 'auto' (size based on content)
• Use array (or stack element) to nest multiple elements in a single column:

{
    columns: [
        {text: 'Hello'},
        [
            {text: 'the'},
            {text: 'World'}
        ]
    ]
}

• columnGap: number. Applied on the column tag or in a style to define the gap in points between columns.

Unordered Lists (ul tag)

• Defined as an array of objects: {ul: [{item1}, {item2}, {itemn}]} where each object is a different bullet point.
• type: 'square', 'circle' or 'none'
• listType: same as type but applied on child element
• markerColor: color name or HEX, e.g.: 'black' or '#000000'

Ordered Lists (ol tag)

• Defined as an array of objects: {ol: [{item1}, {item2}, {itemn}]} where each object is a different item.
• reversed: boolean
• start: number
• counter: number (apply on child element: {ol: [{text: 'Hello', counter: 10}])
• type: 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman' or 'none'
• listType: same as type but applied on child element
• separator: string or array. String for separator after number (e.g. ')' for '1)'). Array for before and after (e.g. ['(', ')'] for '(1)').
• markerColor: color name or HEX, e.g.: 'black' or '#000000'

Images (image tag)

• PNG or JPG supported
• specify path, data url or 'name' for an 'images' dictionary (outside of the 'content' array): {image: 'img/test.jpg'}
• width: number and/or height: number
• If only one or the other is specified, the image is scaled proportionally. If both are specified, the image is stretched. If none are specified, the image's original size is used.
• fit: [number, number]. Use that to automagically fit the image in a specified box.

Tables (table tag)

The table tag is a bit special, as such, the following definitions should be seen like this:

{
    table: {
        body:[
            [{text: 'Hello', //This is table CELL}]
        ],
        // This is INSIDE table tag
    },
    // This is OUTSIDE table tag
}

Inside table tag properties

• body: array of arrays representing rows and columns
• widths: array of column widths: (fixed size: number), '*' (equal sized) or 'auto' (size based on content)
• heights: array of row heights, fixed height: number or function for dynamically defining the heights:

heights: function (row) {
    return (row + 1) * 25;
}

• headerRows: number. Define how many rows are treated as headers and repeated on the next pages.
• dontBreakRows: boolean. Set to true to make sure long rows are not broken into multiple pages.
• keepWithHeaderRows: number. Define how many rows to keep entirely on the same page as the header row.

Outside table tag properties

• layout: programmatically define a layout for the table:

layout: {
    hLineWidth: function (i, node) {
        return (i === 0 || i === node.table.body.length) ? 2 : 1;
    },
    vLineWidth: function (i, node) {
        return (i === 0 || i === node.table.widths.length) ? 2 : 1;
    },
    hLineColor: function (i, node) {
        return (i === 0 || i === node.table.body.length) ? 'black' : 'gray';
    },
    vLineColor: function (i, node) {
        return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
    },
    // paddingLeft: function(i, node) { return 4; },
    // paddingRight: function(i, node) { return 4; },
    // paddingTop: function(i, node) { return 2; },
    // paddingBottom: function(i, node) { return 2; },
    // fillColor: function (i, node) { return null; }
    // defaultBorder: boolean (true for all borders, false for no borders)
}

(Or you can use a predefined value: layout: noBorders, layout: headerLineOnly or layout: lightHorizontalLines)

Table cell properties

• rowSpan: number
• colSpan: number
• noWrap: boolean. Set to true to disable Word Wrap on 'auto' sized columns
• border: [bool, bool, bool, bool] or undefined
• fillColor: color name or HEX, e.g.: 'black' or '#000000'

Table of Contents (toc tag)

• Defined as an object: {toc: {...}}
• All text object with the tocItem: true attribute will be included.
• title: document element (ex.: title: {text: 'Table of Contents', style: 'header'})
• textMargin: array or number (see margin). Margin to set for the text element next to the page number.
• textStyle: object or string. Style to be set to the text element next to the page number.
• numberStyle: object or string. Style to be set to the page number.

pageReference and textReference

• These can be used to create custom Tables of Content
• pageReference gives the page number of the page containing an element of a given id
• textReference gives the text content of the element of a given id
• Example:

// This should display "Hello World!: 2" on page 1 and "Hello World!" on page 2.
[
    {
        text: [
            {textReference: 'theTitle'},
            ': ',
            {pageReference: 'theTitle'}
        ],
        pageBreak: 'after'
    },
    {
        text: 'Hello World!',
        id: 'theTitle'
    }
]

QR Code (qr tag)

• Works by specifying {qr: 'text to be encoded'}
• foreground: color name or HEX, e.g.: 'black' or '#000000'
• background: color name or HEX, e.g.: 'black' or '#000000'
• fit: number. Specify to constrain the barcode to a specific square area.

Vector Drawing (canvas tag)

• type: 'rect', 'line', 'polyline' or 'ellipse'
• dash: {length: number}. For dashed lines.
• lineWidth: number
• lineColor: color name or HEX, e.g.: 'black' or '#000000'
• color: color name or HEX, e.g.: 'black' or '#000000'. Fill color for closed shapes.
• fillOpacity: float. For closed shapes.
• lineCap: 'round' or 'square'
• linearGradient: array of colors. For closed shapes.
• closePath: boolean. For polylines: set to true to close the shape.
• x, y, w, h, r: specifications for rect
• x1, y1, x2, y2: specifications for line
• x, y, r1, r2: specifications for ellipse
• points: [{x, y}, ...]: specifications for polyline

Dynamically control page breaks, for instance to avoid orphan children (directly from the documentation)

A pageBreakBefore function can be specified, which can determine if a page break should be inserted before a node. To implement a 'no orphan child' rule, use a definition like this:

var dd = {
    content: [
       {text: '1 Headline', headlineLevel: 1},
       'Some long text of variable length ...',
       {text: '2 Headline', headlineLevel: 1},
       'Some long text of variable length ...',
       {text: '3 Headline', headlineLevel: 1},
       'Some long text of variable length ...',
    ],
  pageBreakBefore: function(currentNode, followingNodesOnPage, nodesOnNextPage, previousNodesOnPage) {
     return currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0;
  }
}

If pageBreakBefore returns true, a page break will be added before the currentNode. Current node has the following information attached:

{
   id: '<as specified in doc definition>',
   headlineLevel: '<as specified in doc definition>',
   text: '<as specified in doc definition>',
   ul: '<as specified in doc definition>',
   ol: '<as specified in doc definition>',
   table: '<as specified in doc definition>',
   image: '<as specified in doc definition>',
   qr: '<as specified in doc definition>',
   canvas: '<as specified in doc definition>',
   columns: '<as specified in doc definition>',
   style: '<as specified in doc definition>',
   pageOrientation '<as specified in doc definition>',
   pageNumbers: [2, 3], // The pages this element is visible on (e.g. multi-line text could be on more than one page)
   pages: 6, // the total number of pages of this document
   stack: false, // if this is an element which encapsulates multiple sub-objects
   startPosition: {
     pageNumber: 2, // the page this node starts on
     pageOrientation: 'landscape', // the orientation of this page
     left: 60, // the left position
     right: 60, // the right position
     verticalRatio: 0.2, // the ratio of space used vertically in this document (excluding margins)
     horizontalRatio: 0.0  // the ratio of space used horizontally in this document (excluding margins)
   }
}

Added. Thanks for letting me know!

Very useful, thank you. I noticed a few more things that could be useful:

Individual margins

Styles margins can also be specified individually with marginLeft, marginTop, marginRight and marginBottom.
For example:

{  
   marginLeft: 10,
   text: "some text"
}

This allows to combine them from different styles.

Tables columns widths as percentage

Tables columns widths can be specified in percent, for example:

table: {
  headerRows: 1,
  widths: [ "50%", "20%", "30%" ],
  body: [
    [ 'First', 'Second', 'Third' ]
  ]
}

This does not seem to work for columns.

leadingIndent

It's possible to indent only the first line of a paragraph by using leadingIndent.
For example:

{ 
    text: "a long paragraph",
    leadingIndent: 10
}

Opacity

Opacity is a number between 0 and 1 and can also be used for text elements (in addition to watermark), for example:

{ text: "OPACITY", opacity: 0.1 },

characterSpacing

Space between characters can be set using characterSpacing wich defaults to 0.
For example:

{
    characterSpacing: 1,
    text: "some text"
}

noWrap

I believe (not tested yet) that noWrap can also be used for any text element, not just in columns:

{ text: "->", noWrap: true },

Default values

Here as some default values used by pdfmake:

Document:

pageSize: 'A4'

Styles:

lineHeight: 1,
font: 'Roboto',
alignment: 'left',
fontSize: 12,

Default table layout:

const defaultTableLayout = {
    hLineWidth(i, node) {
        return 1;
    },
    vLineWidth(i, node) {
        return 1;
    },
    hLineColor(i, node) {
        return 'black';
    },
    vLineColor(i, node) {
        return 'black';
    },
    hLineStyle(i, node) {
        return null;
    },
    vLineStyle(i, node) {
        return null;
    },
    paddingLeft(i, node) {
        return 4;
    },
    paddingRight(i, node) {
        return 4;
    },
    paddingTop(i, node) {
        return 2;
    },
    paddingBottom(i, node) {
        return 2;
    },
    fillColor(i, node) {
        return null;
    },
    defaultBorder: true
};

Colors

Here is the list of colors from pdfkit:

• aliceblue: rgb(240, 248, 255)
• antiquewhite: rgb(250, 235, 215)
• aqua: rgb(0, 255, 255)
• aquamarine: rgb(127, 255, 212)
• azure: rgb(240, 255, 255)
• beige: rgb(245, 245, 220)
• bisque: rgb(255, 228, 196)
• black: rgb(0, 0, 0)
• blanchedalmond: rgb(255, 235, 205)
• blue: rgb(0, 0, 255)
• blueviolet: rgb(138, 43, 226)
• brown: rgb(165, 42, 42)
• burlywood: rgb(222, 184, 135)
• cadetblue: rgb(95, 158, 160)
• chartreuse: rgb(127, 255, 0)
• chocolate: rgb(210, 105, 30)
• coral: rgb(255, 127, 80)
• cornflowerblue: rgb(100, 149, 237)
• cornsilk: rgb(255, 248, 220)
• crimson: rgb(220, 20, 60)
• cyan: rgb(0, 255, 255)
• darkblue: rgb(0, 0, 139)
• darkcyan: rgb(0, 139, 139)
• darkgoldenrod: rgb(184, 134, 11)
• darkgray: rgb(169, 169, 169)
• darkgreen: rgb(0, 100, 0)
• darkgrey: rgb(169, 169, 169)
• darkkhaki: rgb(189, 183, 107)
• darkmagenta: rgb(139, 0, 139)
• darkolivegreen: rgb(85, 107, 47)
• darkorange: rgb(255, 140, 0)
• darkorchid: rgb(153, 50, 204)
• darkred: rgb(139, 0, 0)
• darksalmon: rgb(233, 150, 122)
• darkseagreen: rgb(143, 188, 143)
• darkslateblue: rgb(72, 61, 139)
• darkslategray: rgb(47, 79, 79)
• darkslategrey: rgb(47, 79, 79)
• darkturquoise: rgb(0, 206, 209)
• darkviolet: rgb(148, 0, 211)
• deeppink: rgb(255, 20, 147)
• deepskyblue: rgb(0, 191, 255)
• dimgray: rgb(105, 105, 105)
• dimgrey: rgb(105, 105, 105)
• dodgerblue: rgb(30, 144, 255)
• firebrick: rgb(178, 34, 34)
• floralwhite: rgb(255, 250, 240)
• forestgreen: rgb(34, 139, 34)
• fuchsia: rgb(255, 0, 255)
• gainsboro: rgb(220, 220, 220)
• ghostwhite: rgb(248, 248, 255)
• gold: rgb(255, 215, 0)
• goldenrod: rgb(218, 165, 32)
• gray: rgb(128, 128, 128)
• grey: rgb(128, 128, 128)
• green: rgb(0, 128, 0)
• greenyellow: rgb(173, 255, 47)
• honeydew: rgb(240, 255, 240)
• hotpink: rgb(255, 105, 180)
• indianred: rgb(205, 92, 92)
• indigo: rgb(75, 0, 130)
• ivory: rgb(255, 255, 240)
• khaki: rgb(240, 230, 140)
• lavender: rgb(230, 230, 250)
• lavenderblush: rgb(255, 240, 245)
• lawngreen: rgb(124, 252, 0)
• lemonchiffon: rgb(255, 250, 205)
• lightblue: rgb(173, 216, 230)
• lightcoral: rgb(240, 128, 128)
• lightcyan: rgb(224, 255, 255)
• lightgoldenrodyellow: rgb(250, 250, 210)
• lightgray: rgb(211, 211, 211)
• lightgreen: rgb(144, 238, 144)
• lightgrey: rgb(211, 211, 211)
• lightpink: rgb(255, 182, 193)
• lightsalmon: rgb(255, 160, 122)
• lightseagreen: rgb(32, 178, 170)
• lightskyblue: rgb(135, 206, 250)
• lightslategray: rgb(119, 136, 153)
• lightslategrey: rgb(119, 136, 153)
• lightsteelblue: rgb(176, 196, 222)
• lightyellow: rgb(255, 255, 224)
• lime: rgb(0, 255, 0)
• limegreen: rgb(50, 205, 50)
• linen: rgb(250, 240, 230)
• magenta: rgb(255, 0, 255)
• maroon: rgb(128, 0, 0)
• mediumaquamarine: rgb(102, 205, 170)
• mediumblue: rgb(0, 0, 205)
• mediumorchid: rgb(186, 85, 211)
• mediumpurple: rgb(147, 112, 219)
• mediumseagreen: rgb(60, 179, 113)
• mediumslateblue: rgb(123, 104, 238)
• mediumspringgreen: rgb(0, 250, 154)
• mediumturquoise: rgb(72, 209, 204)
• mediumvioletred: rgb(199, 21, 133)
• midnightblue: rgb(25, 25, 112)
• mintcream: rgb(245, 255, 250)
• mistyrose: rgb(255, 228, 225)
• moccasin: rgb(255, 228, 181)
• navajowhite: rgb(255, 222, 173)
• navy: rgb(0, 0, 128)
• oldlace: rgb(253, 245, 230)
• olive: rgb(128, 128, 0)
• olivedrab: rgb(107, 142, 35)
• orange: rgb(255, 165, 0)
• orangered: rgb(255, 69, 0)
• orchid: rgb(218, 112, 214)
• palegoldenrod: rgb(238, 232, 170)
• palegreen: rgb(152, 251, 152)
• paleturquoise: rgb(175, 238, 238)
• palevioletred: rgb(219, 112, 147)
• papayawhip: rgb(255, 239, 213)
• peachpuff: rgb(255, 218, 185)
• peru: rgb(205, 133, 63)
• pink: rgb(255, 192, 203)
• plum: rgb(221, 160, 221)
• powderblue: rgb(176, 224, 230)
• purple: rgb(128, 0, 128)
• red: rgb(255, 0, 0)
• rosybrown: rgb(188, 143, 143)
• royalblue: rgb(65, 105, 225)
• saddlebrown: rgb(139, 69, 19)
• salmon: rgb(250, 128, 114)
• sandybrown: rgb(244, 164, 96)
• seagreen: rgb(46, 139, 87)
• seashell: rgb(255, 245, 238)
• sienna: rgb(160, 82, 45)
• silver: rgb(192, 192, 192)
• skyblue: rgb(135, 206, 235)
• slateblue: rgb(106, 90, 205)
• slategray: rgb(112, 128, 144)
• slategrey: rgb(112, 128, 144)
• snow: rgb(255, 250, 250)
• springgreen: rgb(0, 255, 127)
• steelblue: rgb(70, 130, 180)
• tan: rgb(210, 180, 140)
• teal: rgb(0, 128, 128)
• thistle: rgb(216, 191, 216)
• tomato: rgb(255, 99, 71)
• turquoise: rgb(64, 224, 208)
• violet: rgb(238, 130, 238)
• wheat: rgb(245, 222, 179)
• white: rgb(255, 255, 255)
• whitesmoke: rgb(245, 245, 245)
• yellow: rgb(255, 255, 0)
• yellowgreen: rgb(154, 205, 50]

Page Sizes

Here are the page sizes in [width, height] from pdfkit:

• '4A0': [4767.87, 6740.79]
• '2A0': [3370.39, 4767.87]
• A0: [2383.94, 3370.39]
• A1: [1683.78, 2383.94]
• A2: [1190.55, 1683.78]
• A3: [841.89, 1190.55]
• A4: [595.28, 841.89]
• A5: [419.53, 595.28]
• A6: [297.64, 419.53]
• A7: [209.76, 297.64]
• A8: [147.4, 209.76]
• A9: [104.88, 147.4]
• A10: [73.7, 104.88]
• B0: [2834.65, 4008.19]
• B1: [2004.09, 2834.65]
• B2: [1417.32, 2004.09]
• B3: [1000.63, 1417.32]
• B4: [708.66, 1000.63]
• B5: [498.9, 708.66]
• B6: [354.33, 498.9]
• B7: [249.45, 354.33]
• B8: [175.75, 249.45]
• B9: [124.72, 175.75]
• B10: [87.87, 124.72]
• C0: [2599.37, 3676.54]
• C1: [1836.85, 2599.37]
• C2: [1298.27, 1836.85]
• C3: [918.43, 1298.27]
• C4: [649.13, 918.43]
• C5: [459.21, 649.13]
• C6: [323.15, 459.21]
• C7: [229.61, 323.15]
• C8: [161.57, 229.61]
• C9: [113.39, 161.57]
• C10: [79.37, 113.39]
• RA0: [2437.8, 3458.27]
• RA1: [1729.13, 2437.8]
• RA2: [1218.9, 1729.13]
• RA3: [864.57, 1218.9]
• RA4: [609.45, 864.57]
• SRA0: [2551.18, 3628.35]
• SRA1: [1814.17, 2551.18]
• SRA2: [1275.59, 1814.17]
• SRA3: [907.09, 1275.59]
• SRA4: [637.8, 907.09]
• EXECUTIVE: [521.86, 756.0]
• FOLIO: [612.0, 936.0]
• LEGAL: [612.0, 1008.0]
• LETTER: [612.0, 792.0]
• TABLOID: [792.0, 1224.0]