Invoice
Thanks for your order.
"); ``` Pass embedded fonts (via `loadFont`) and a `resolveImage` callback for production output: ```ts import { readFile } from "node:fs/promises"; import { PDFDocument } from "pdf-lib"; import { loadFont, loadImage } from "@boxpdf/writer"; import { htmlToPdf } from "@boxpdf/html-reader"; const pdf = await PDFDocument.create(); const inter = await loadFont(pdf, await readFile("Inter-Regular.ttf")); const interBold = await loadFont(pdf, await readFile("Inter-Bold.ttf")); const logo = await loadImage(pdf, await readFile("logo.png")); const bytes = await htmlToPdf(await readFile("invoice.html", "utf8"), { pdf, // reuse the document you embedded into font: inter, boldFont: interBold, resolveImage: ({ url }) => (url === "logo.png" ? logo : undefined), margin: 40 }); ``` Options: `font` / `boldFont` / `italicFont` / `boldItalicFont` (default to Helvetica), `pdf` (render into an existing document), `margin` (default 40), `size` (default US Letter), `width` (CSS containing-block width; defaults to the page's content width), `debug`, plus everything `htmlToBoxpdf` accepts (`resolveFont`, `resolveImage`, `baseUrl`, `defaultFontSize`, `defaultColor`, `diagnostics`, `profile`). ### `htmlToBoxpdf` — the nodes, for full control `htmlToBoxpdf` turns HTML into normal boxpdf nodes without rendering. Reach for it when you need the nodes themselves, the `warnings`/`diagnostics`, multiple render passes, or `renderFlow` headers/footers. ```ts import { readFile } from "node:fs/promises"; import { PDFDocument } from "pdf-lib"; import { loadFont, loadImage, renderFlow } from "@boxpdf/writer"; import { fontFamily, htmlToBoxpdf } from "@boxpdf/html-reader"; const html = await readFile("invoice.html", "utf8"); const pdf = await PDFDocument.create(); const inter = await loadFont(pdf, await readFile("Inter-Regular.ttf")); const interBold = await loadFont(pdf, await readFile("Inter-Bold.ttf")); const logo = await loadImage(pdf, await readFile("logo.png")); const result = htmlToBoxpdf(html, { font: inter, boldFont: interBold, resolveFont: fontFamily({ Inter: { normal: inter, bold: interBold }, "sans-serif": { normal: inter, bold: interBold } }), resolveImage: ({ url }) => (url === "logo.png" ? logo : undefined), baseUrl: process.cwd(), width: 532 }); console.log(result.warnings); await renderFlow(pdf, result.nodes, { margin: 40 }); const bytes = await pdf.save(); ``` `width` is the CSS containing block width in PDF points. A US Letter page with 40pt margins has a 532pt content width, so `width: 532` is a good default. ### `streamHtmlToPdf` — bounded large-document conversion `streamHtmlToPdf` accepts a function that reopens the HTML for each of its two passes and writes PDF bytes incrementally. Embed fonts before calling it; use `prepare` to embed images found by the resource preflight before output begins. ```ts import { createReadStream, createWriteStream } from "node:fs"; import { PDFDocument, StandardFonts } from "pdf-lib"; import { nodeAdapter } from "@boxpdf/writer"; import { streamHtmlToPdf } from "@boxpdf/html-reader"; const pdf = await PDFDocument.create(); const font = await pdf.embedFont(StandardFonts.Helvetica); const result = await streamHtmlToPdf( () => createReadStream("archive.html"), nodeAdapter(createWriteStream("archive.pdf")), { pdf, font, width: 532, margin: 40 } ); console.log(result.pageCount, result.dom.maxBufferedNodes); ``` Ordinary block wrappers and tables are released in bounded continuation fragments. Atomic layouts such as flex/grid, positioned or transformed containers, and single uninterrupted text nodes have explicit safety caps and fail with a useful error when they cannot be streamed safely. Selectors whose meaning depends on sibling position conservatively disable wrapper fragmentation. ## Fonts Fonts are explicit. `boxpdf-html` does not discover system fonts and does not ship a browser font stack. This keeps rendering deterministic and works in serverless runtimes. At minimum, pass `font`. Pass `boldFont` and `italicFont` if your HTML uses bold or italic text: ```ts const result = htmlToBoxpdf(html, { font, boldFont, italicFont, width: 532 }); ``` For CSS `font-family`, use `fontFamily()`: ```ts const resolveFont = fontFamily({ Inter: { normal: interRegular, bold: interBold, italic: interItalic, boldItalic: interBoldItalic }, Helvetica: { normal: fallback, bold: fallbackBold }, "sans-serif": { normal: fallback, bold: fallbackBold } }); ``` The resolver receives `{ families, weight, style }` and returns a pdf-lib `PDFFont`. You can provide your own resolver when you need looser mapping, font aliases, language-specific fallbacks, or weight synthesis. Gotchas: - `font-family: system-ui` only works if your resolver maps `system-ui`. - Standard pdf-lib fonts are convenient but limited; use embedded TTF/OTF fonts for real documents. - Complex shaping depends on pdf-lib/fontkit behavior. Western-language invoice/report text is the target. - Font metrics affect layout. Use the same embedded fonts in tests and production when visual stability matters. ## Tailwind CSS Tailwind works when you render its generated CSS, not raw class names alone. The usual flow is: 1. Write document HTML with Tailwind classes. 2. Run Tailwind against that HTML. 3. Inline or pass the generated CSS to `boxpdf-html`. 4. Render with a containing width that matches your intended PDF content area. Example source: ```htmlStatus
Paid
Notes
Two fraction column wraps later.