Tickets & receipts

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

Labels and tickets

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. Vector paths scale with the page. Check that the printed code has enough physical size and clear space for scanning.

Common sizes in CSS px:

Receipts

Omit height and the page grows to fit the content. 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. Nothing knows the final height until the layout finishes.

Certificates

A certificate is a fixed page with artwork behind the text. Gradients, borders, 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 } },
);

Overflowing content is clipped, exactly like an image render. Size the text to the box, or measure it first.

Options and overflow

viewport rejects the paged options as type errors. Everything else carries over, including pdfa and attachments. See Single-page viewport.

The same component can also render as a PNG with takumi-js. Pass image dimensions to the image renderer instead of PDF page options.