Generate PDFs in React

Generate a PDF in React

POST your HTML and data to /api/v1/generate with your API key, then save the PDF that comes back. Swap in your own HTML or a saved template_id and loop over records to render at scale.

function DownloadInvoiceButton() {
  async function handleClick() {
    // Call YOUR backend route — never put the PDFgen key in client code.
    const res = await fetch("/api/generate-pdf");
    const blob = await res.blob();

    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "invoice.pdf";
    a.click();
    URL.revokeObjectURL(url);
  }

  return <button onClick={handleClick}>Download invoice</button>;
}

Convert existing HTML to PDF in React

Already have finished HTML? Skip templating — capture an element's HTML and convert it via your backend and send it with engine: "legacy", which tells the API your markup is final.

function ExportToPdfButton() {
  async function handleClick() {
    // Grab the rendered HTML of any element on the page.
    const html = document.getElementById("invoice").outerHTML;

    // Proxy through your own backend — never expose the API key client-side.
    const res = await fetch("/api/html-to-pdf", { method: "POST", body: html });
    const blob = await res.blob();

    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "invoice.pdf";
    a.click();
    URL.revokeObjectURL(url);
  }

  return <button onClick={handleClick}>Export to PDF</button>;
}

How it works

1. 1

   Send your HTML + data

   POST an HTML template (with optional Handlebars tokens) and a data object to the API.

2. 2

   We render the PDF

   PDFgen renders it server-side — no headless browser for you to run or scale.

3. 3

   Get the PDF back

   Receive the PDF binary (or a hosted link with export_type:"url") and serve it from React.

Good to know

• Never expose your API key in client code — proxy through a backend route you control.
• Your /api/generate-pdf route forwards the request to PDFgen (see the Node.js or Next.js guide).
• URL.createObjectURL + a temporary <a> is the standard way to trigger a file download from a Blob.

Frequently asked questions

Can I call the PDF API directly from React?

You shouldn’t — that would expose your API key in the browser. Call a backend route you own, and have it forward the request to PDFgen.

How do I trigger a download in React?

Fetch the PDF as a Blob, create an object URL, and click a temporary anchor with a download attribute (shown above).

What renders the backend route?

Any server — the Node.js and Next.js examples on this site show the exact server-side call your /api/generate-pdf route should make.

Generate PDFs in other languages