Skip to content
D
Documentation

Export — Pdf

reference
2 min readUpdated

Import these from @grafloria/renderer.

Functions

exportPdf

Export a rendered VNode tree as a vector PDF.

ts
function exportPdf(root: VNode, options: PdfExportOptions = {}): PdfExportResult

pageDimensions

The page's dimensions in points, after orientation.

ts
function pageDimensions(
  size: PageSize | { width: number; height: number },
  orientation: Orientation
): { width: number; height: number }

Constants

PAGE_SIZES

Page sizes in POINTS (1/72"), which is PDF's only unit.

ts
const PAGE_SIZES: { readonly a4: { readonly width: 595.28; readonly height: 841.89; }; readonly letter: { readonly width: 612; readonly height: 792; }; readonly legal: { readonly width: 612; readonly height: 1008; }; readonly a3: { readonly width: 841.89; readonly height: 1190.55; }; readonly tabloid: { readonly width: 792; readonly height: 1224; }; }

Interfaces

PdfExportOptions

ts
interface PdfExportOptions

Properties

NameTypeDefaultDescription
theme?ThemeThe theme the tree was rendered with. REQUIRED for fidelity in CSS mode: a node's fill and a link's stroke live in the stylesheet, not on the element, so without the theme to resolve them the PDF comes out nearly blank. Defaults to LIGHT_THEME.
pageSize?PageSize | { width: number; height: number }
orientation?Orientation
margin?number | { top: number; right: number; bottom: number; left: number }Points (1/72"). Default 36 (half an inch) on every side.
viewBox?RectangleThe world rectangle to draw. Default: the tree's content bounds.
padding?numberPadding around the content bounds, in world units. Default 20.
metadata?PdfMetadata
backgroundColor?stringPaint a page background. Default: none (white paper shows through).
pages?Array<Rectangle | { rect: Rectangle; clip?: Rectangle }>Pages to lay the diagram across. Supplied by the paginator.
pageNumbers?booleanDraw "n / total" at the foot of each page. Default false; the paginator turns it on.
resolveVar?(name: string) => string | null | undefinedThe LIVE value of a CSS custom property — e.g. getComputedStyle(svg).getPropertyValue(name) on the diagram's root. An element's own paint can be a var(--…) (the line markers ride var(--grafloria-link-stroke, …) so a token bridge recolours them with their line); this is how a bridged value reaches the PDF.

PdfExportResult

ts
interface PdfExportResult

Properties

NameTypeDefaultDescription
pdfUint8Array
pageCountnumber
warningsstring[]

PdfMetadata

ts
interface PdfMetadata

Properties

NameTypeDefaultDescription
title?string
author?string
subject?string
keywords?string
creationDate?stringISO-8601. Omit for a deterministic file — a wall-clock stamp makes bytes differ.

PdfRgb

PDF paints in 0–1 channels, not 0–255. Named PdfRgb so it cannot be confused with the theme's Rgb (which is 0–255).

ts
interface PdfRgb

Properties

NameTypeDefaultDescription
rnumber
gnumber
bnumber

Types

BaseFont

Also has every member of String, listed on its own entry.

ts
type BaseFont =
  | 'Helvetica'
  | 'Helvetica-Bold'
  | 'Helvetica-Oblique'
  | 'Helvetica-BoldOblique'
  | 'Times-Roman'
  | 'Times-Bold'
  | 'Times-Italic'
  | 'Times-BoldItalic'
  | 'Courier'
  | 'Courier-Bold';

Orientation

Also has every member of String, listed on its own entry.

ts
type Orientation = 'portrait' | 'landscape';

PageSize

Also has every member of String, listed on its own entry.

ts
type PageSize = keyof typeof PAGE_SIZES;

Was this page helpful?

Export — Pdf — Grafloria