Single-page viewport

Set viewport to render one page, such as a certificate, card, or receipt. With both dimensions set, the page works like an image render: percentage heights resolve against the viewport, and content outside it is clipped.

import { render } from "takumi-pdf";

const pdf = await render(<div style={{ width: "100%", height: "100%" }}>Certificate</div>, {
  viewport: { width: 1123, height: 794 }, // A4 landscape in px
});

Content-sized pagesCopy Anchor Link

Omit height and the page grows to fit its content, like a thermal receipt. Percentage heights do not resolve in this mode, so size elements by their content or with explicit lengths:

import { render } from "takumi-pdf";

const pdf = await render(receipt, { viewport: { width: 302 } }); // 80mm at 96 dpi

OptionsCopy Anchor Link

viewport cannot be combined with the paged options: size, landscape, margin, header, footer, pages, or pageRanges. TypeScript reports the combination as a type error. A single page has no margin, so add padding inside the document for whitespace.

Every other option works the same, including links, outline, metadata, pdfa, and attachments.