Quick start

exportToPDF works on an HTMLElement. Render your React document normally, keep a ref to the printable root, and pass ref.current to the exporter.

Try it in your browser first

The fastest way to see the library work end-to-end is the official starter on StackBlitz. It boots a Vite + React app with react-print-pdf already installed and a small invoice document wired to an Export PDF button.

Open the starter on StackBlitz

The full source lives in examples/starter/ so you can also clone it locally.

1. Create a printable component

Give the printable area an explicit width that fits your target page. For A4 portrait with 20mm margins, 640px is a safe starting point.

Invoice.tsx

export function Invoice() {
  return (
    <article className="w-[640px] bg-white p-10 text-gray-950">
      <h1 className="text-2xl font-semibold tracking-tight">Invoice #1042</h1>
      <p className="mt-2 text-sm text-gray-500">Acme Corp · Due May 31</p>

      <table className="mt-8 w-full text-sm">
        <thead className="border-b text-left text-gray-500">
          <tr>
            <th className="py-2">Item</th>
            <th className="py-2 text-right">Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr className="border-b">
            <td className="py-3">Platform license</td>
            <td className="py-3 text-right">$250.00</td>
          </tr>
          <tr>
            <td className="py-3 font-medium">Total</td>
            <td className="py-3 text-right font-medium">$250.00</td>
          </tr>
        </tbody>
      </table>
    </article>
  );
}

2. Export from a button

Two equivalent paths. Pick the one that fits your call site.

Option A — hook + `<Printable>` (recommended)

The React DX layer owns the ref, loading state, and error state for you, and <Printable> sizes the container to the page automatically. You can drop the explicit w-[640px] from your Invoice component when you wrap it in <Printable>.

ExportButton.tsx

import { Printable, usePDFExport } from "react-print-pdf";
import { Invoice } from "./Invoice";

export function ExportButton() {
  const { ref, exportPDF, isExporting, error } = usePDFExport({
    format: "A4",
    margin: "20mm",
    filename: "invoice.pdf",
  });

  return (
    <>
      <button type="button" onClick={exportPDF} disabled={isExporting}>
        {isExporting ? "Exporting…" : "Export PDF"}
      </button>
      {error && <p role="alert">{error.message}</p>}
      <Printable ref={ref} format="A4" margin="20mm">
        <Invoice />
      </Printable>
    </>
  );
}

Full reference for the hook and components on the React API page.

Option B — the functional API

Use exportToPDF directly when you want full control or you're outside React.

ExportButton.tsx

import { useRef } from "react";
import { exportToPDF } from "react-print-pdf";
import { Invoice } from "./Invoice";

export function ExportButton() {
  const printRef = useRef<HTMLDivElement>(null);

  async function exportInvoice() {
    if (!printRef.current) return;

    const result = await exportToPDF(printRef.current, {
      format: "A4",
      margin: "20mm",
      filename: "invoice.pdf",
    });

    result.save();
  }

  return (
    <>
      <button type="button" onClick={exportInvoice}>
        Export PDF
      </button>

      <div ref={printRef}>
        <Invoice />
      </div>
    </>
  );
}

3. Register custom fonts

If your document uses a non-standard font, register the TTF/OTF URL before exporting.

import { registerFont } from "react-print-pdf";

await registerFont({
  family: "Inter",
  src: "/fonts/Inter-Regular.ttf",
  weight: 400,
});

await registerFont({
  family: "Inter",
  src: "/fonts/Inter-Bold.ttf",
  weight: 700,
});

The registered family must match the CSS font-family used by the DOM. The library waits for browser fonts before walking layout, then embeds the registered bytes in the PDF.

4. Use the result

const result = await exportToPDF(printRef.current, options);

result.save();              // download with options.filename
result.save("copy.pdf");    // download with override
result.preview();           // open object URL in a new tab
const bytes = result.bytes();
const blob = result.blob();

Use exportToPDF for the full options reference.