Single-page viewport

Set viewport to create a single page for a certificate, card, or receipt. With both dimensions set, 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 pages

Omit height for a page that grows to fit its content, such as a thermal receipt. Use content or explicit lengths to determine element heights. Percentage heights do not resolve in this mode:

import { render } from "takumi-pdf";

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

viewport cannot be combined with size, landscape, margin, header, footer, or pageRanges. Use padding inside the document for whitespace around a single page. Hyperlinks, outline, and metadata work in both modes.