rlefevre/PDFMakeDefs.md

## PDFMakeDefs.md

      
    Raw
  

              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)
   }
}