From Puppeteer

Start with the HTML you pass to page.setContent(). Pass the same string to render(), and translate the page.pdf() options with the option map. Headers and footers use the same pageNumber and totalPages class hooks.

Before and afterCopy Anchor Link

// Puppeteer
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(html, { waitUntil: "networkidle0" });

const pdf = await page.pdf({
  format: "A4",
  margin: { top: "48px", bottom: "64px", left: "48px", right: "48px" },
  displayHeaderFooter: true,
  footerTemplate: `<div style="font-size:10px;width:100%;text-align:center">
    Page <span class="pageNumber"></span> of <span class="totalPages"></span>
  </div>`,
  printBackground: true,
});

await browser.close();

// takumi-pdf
import { googleFonts } from "@takumi-rs/helpers";
import { render } from "takumi-pdf";
import { PageNumber, TotalPages } from "takumi-pdf/primitives";

const pdf = await render(html, {
  size: "a4",
  margin: { top: 48, bottom: 64, left: 48, right: 48 },
  footer: (
    <div tw="flex w-full justify-center text-[10px]">
      Page <PageNumber /> of <TotalPages />
    </div>
  ),
  fonts: await googleFonts(["Inter"]),
});

render() parses HTML strings, including <style> tags. It also takes JSX and node trees, and so do header and footer.

Option mapCopy Anchor Link

Margins take numbers in CSS px, not length strings. For Chromium's "0.5in", pass 48.

Fetching moves to your codeCopy Anchor Link

render() does not fetch images. Call prepare() first. It styles the document as render() would, fetches the images it draws, and loads the fonts its text uses:

import { prepare, render } from "takumi-pdf";

const prepared = await prepare(html); 

const pdf = await render(prepared);

prepare() fetches every remote http or https URL in <img src>, background-image, mask-image, and list-style-image, including those that <style> rules set and those in the header and footer.

• Its images option takes timeout, maxBytes, an allowUrl predicate, a fetchCache that reuses bytes across renders, and your own fetch. Your fetch also receives relative URLs such as /logo.png.
• Pass page and layout options such as size, margin, header, and css to prepare(). Pass file options such as metadata and pdfa to render().

Fonts come from the fonts option, not from CSS @font-face rules. See Fonts & images. Font URL loaders and googleFonts() make their own requests, so give them their own fetch limits.

Known gapsCopy Anchor Link

Takumi supports a subset of browser CSS. Check these differences before you replace Puppeteer.

• Scripts do not run, so charts and diagrams have to arrive as markup, SVG, or images. A client-side chart library does not work.
• PDF output rejects filter: blur() and drop-shadow(), and does not draw backdrop-filter. Blurred box-shadow and text-shadow are approximated with bands. Grid, flexbox, transforms, gradients, masks, and clip paths all work.
• @page is not supported, so page geometry comes from the options.

Keep Puppeteer to reproduce a live web page as a browser shows it. Use takumi-pdf for documents written for print. See Comparison for measured numbers.