Components

Page

Defines a single page in the PDF document. Each page can have its own size, orientation, and styles. Content that overflows a page automatically wraps to the next one.

Props

Prop	Type	Default	Description
`size`	`PageSize \| [number, number]`	`'A4'`	Named page size or custom [width, height] in points. Available: A0-A10, B0-B10, C0-C10, LETTER, LEGAL, TABLOID, EXECUTIVE, POSTCARD.
`orientation`	`'portrait' \| 'landscape'`	`'portrait'`	Page orientation. Swaps width and height when set to landscape.
`style`	`Style`	—	Page-level styles. Supports padding, backgroundColor, and flex layout properties.
`wrap`	`boolean`	`true`	When true, content that overflows automatically continues on the next page.
`debug`	`boolean`	`false`	When enabled, every layout element shows a colored border for debugging.
`dpi`	`number`	`72`	Dots per inch for the page rasterization. Higher values increase image/canvas resolution.

Named Page Sizes

Standard sizes available as string constants:

vue

<template>
  <Document>
    <Page size="A4">
      <!-- Common sizes -->
      <Page size="A4">
      <Page size="LETTER">
      <Page size="LEGAL">

      <!-- Custom numeric size (points) -->
      <Page :size="[595, 842]"> <!-- A4 in points -->
    </Page>
  </Document>
</template>

Page With Padding

Use the style prop to add padding around page content:

vue

<template>
  <Document>
    <Page size="A4" :style="{
      padding: 40,
      paddingTop: 60,
      backgroundColor: '#ffffff',
    }">
      <Text>Page content with 40pt padding on all sides...</Text>
    </Page>
  </Document>
</template>

Enabled Wrapping

By default (wrap: true), content that exceeds a page will flow to the next one:

vue

<template>
  <Document>
    <Page size="A4">
      <Text :style="{ fontSize: 12 }">
        Very long text that naturally flows...
      </Text>
      <!-- If text overflows, it wraps to a new page automatically -->
    </Page>
  </Document>
</template>

Debug Mode

Enable debug to see colored borders around every element — useful during layout development:

vue

<template>
  <Document>
    <Page size="A4" :debug="true">
      <View :style="{ padding: 20 }">
        <Text>Debug mode shows element boundaries</Text>
      </View>
    </Page>
  </Document>
</template>

Fixed Page

Set wrap: false for single-page documents where overflow should be clipped:

vue

<template>
  <Document>
    <Page size="A4" :wrap="false">
      <Text>Single-page document — no wrapping</Text>
    </Page>
  </Document>
</template>