Blog
How to generate invoice PDFs in React
You already have an Invoice component that renders on screen. The goal is to turn it into a PDF that finance teams can search and print, not a blurry screenshot. The trick is to render the component to HTML and let a print engine draw the PDF.
Why not html2canvas or jsPDF
html2canvas screenshots the DOM into a bitmap, so the invoice has no selectable text, pixelates on zoom, and any off-screen rows are missing. jsPDF alone makes you place every line by hand. Neither produces the crisp, searchable document an invoice needs.
Render the component to HTML, then to PDF
On the server, render your existing Invoice component to an HTML string and post it. Your fonts, your table styling, and break-inside: avoid for line items all carry over.
import { renderToStaticMarkup } from "react-dom/server";
import { Invoice } from "@/components/Invoice";
export async function POST(req: Request) {
const { order } = await req.json();
const html = "<!doctype html>" + renderToStaticMarkup(<Invoice order={order} />);
const res = await fetch("https://api.pdfpipe.xyz/v1/pdf", {
method: "POST",
headers: {
Authorization: `Bearer ${process.env.PDFPIPE_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ html, options: { format: "A4" } }),
});
return new Response(res.body, { headers: { "Content-Type": "application/pdf" } });
}Make the table paginate cleanly
- Put break-inside: avoid on each line-item row so rows never split across pages.
- Repeat the table header on each page with thead and display: table-header-group.
- Use a footer with running totals so every page is self-explanatory.
Frequently asked
How do I make the invoice text selectable in the PDF?
Avoid canvas screenshots. Send the component HTML to a render API so the PDF contains real vector text that is selectable and searchable.
How do I stop invoice rows splitting across pages?
Add break-inside: avoid to each row and repeat the table header with display: table-header-group. The render engine respects these print rules.
See the full React to PDF guide for the component and download button, or get an API key. 500 free documents a month.