Skip to content

Instantly share code, notes, and snippets.

@sadeghbarati

sadeghbarati/PDFMakeDefs.md

Forked from jfdesrochers/PDFMakeDefs.md
Created June 29, 2021 10:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sadeghbarati/297e6f7077a076294ed062580076a412 to your computer and use it in GitHub Desktop.
Save sadeghbarati/297e6f7077a076294ed062580076a412 to your computer and use it in GitHub Desktop.
Download ZIP
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)
   }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment