Tickets & receipts

Use viewport for a ticket, shipping label, certificate, or receipt. Set both dimensions for a fixed paper size, or omit height for a receipt that grows with its content.

Labels and ticketsCopy Anchor Link

Give viewport the paper size in CSS px at 96 dpi. Percentage heights resolve against it, so a full-bleed background is height: "100%":

import { render } from "takumi-pdf";

// 4in × 6in shipping label
const pdf = await render(
  <div tw="flex h-full w-full flex-col justify-between bg-white p-6">
    <span tw="text-2xl font-semibold">ACME · Priority</span>
    <img src="qr.svg" alt="Tracking code" tw="h-40 w-40 self-center" />
    <span tw="text-xs text-gray-500">1Z 999 AA1 0123 4567</span>
  </div>,
  { viewport: { width: 384, height: 576 }, images: [{ src: "qr.svg", data: qrSvg }] },
);

Generate the QR code or barcode as SVG and pass its bytes through images. It stays vector at any print size. Check that the printed code is large enough, with enough clear space around it, to scan.

Common sizes in CSS px:

ReceiptsCopy Anchor Link

Omit height and the page grows to fit the content, so a till receipt is one continuous strip however many lines it has:

import { render } from "takumi-pdf";

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

Percentage heights do not resolve in this mode, because the page height is known only after layout.

CertificatesCopy Anchor Link

A certificate is a fixed page with artwork behind the text. Gradients, borders, border radii, and transforms all draw as vectors:

import { render } from "takumi-pdf";

const pdf = await render(
  <div
    tw="flex h-full w-full flex-col items-center justify-center"
    style={{ backgroundImage: "linear-gradient(135deg, #eef2ff, #ffffff)" }}
  >
    <span tw="text-sm tracking-[0.3em] text-indigo-500">CERTIFICATE OF COMPLETION</span>
    <span tw="mt-6 text-5xl">{recipient}</span>
  </div>,
  { viewport: { width: 1123, height: 794 } },
);

Content that overflows the page is clipped, as in an image render. Size the text to fit, or check it first with measure().

OptionsCopy Anchor Link

viewport rules out the paged options, and TypeScript reports them as type errors. Every other option still works, including pdfa and attachments. See Single-page viewport.

The same component also renders as a PNG with takumi-js. Pass width and height to the image renderer instead of viewport.