Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To generate a PDF from a React app, use the browser’s print flow when a person should review and save the document, or use a headless browser such as Puppeteer or Playwright when your code needs to create the PDF automatically. For reliable output, prepare a print-friendly view, wait for the app’s content and assets to finish loading, then set the page size, margins, and background options deliberately.
Choose the PDF workflow that matches the job
React renders the interface; PDF output comes from the browser’s print pipeline or from browser automation. The right choice depends chiefly on who initiates the PDF, how much of the interface belongs in it, and where the file must be delivered.
| Need | Use | What to expect |
|---|---|---|
| A user reviews the page and chooses “Save as PDF” | Browser print flow, optionally with react-to-print |
The user and browser control the final print action and some settings. |
| Your application creates a PDF automatically | Puppeteer or Playwright with page.pdf() |
Your code controls navigation, PDF options, and where the resulting bytes go. |
| A specific React component, not the whole page, should be printed | A dedicated print view or react-to-print |
Keep the document content separate from app navigation and controls. |
Do not treat a rasterized screenshot as interchangeable with a browser-generated document PDF without checking the requirements. If users need selectable text, links, accessibility support, or dependable pagination, validate those properties in the actual output. A screenshot-oriented image export is not automatically a paginated, accessible document.
Prepare a print view before capturing
A PDF is only as clean as the page being printed. Create a route or component containing the intended report, receipt, article, or other document. Omit navigation, buttons, transient notices, and interactive widgets that do not belong on paper. Define print styles explicitly:
#1 Best Overall
@media print {
.app-navigation,
.screen-only,
.document-actions {
display: none !important;
}
.document {
color: #111;
background: #fff;
width: auto;
margin: 0;
}
.keep-together {
break-inside: avoid;
}
.new-page {
break-before: page;
}
}
@page {
size: A4;
margin: 16mm;
}Adjust the page size and margins to the intended audience; A4 is an example, not a universal requirement. Test long tables, headings near page ends, and large images. Use page-break rules sparingly: overly aggressive “keep together” rules can leave large blank areas or push content onto extra pages.
Both Puppeteer and Playwright generate PDFs using print CSS by default. If you want screen styling instead, explicitly emulate screen media before generating the PDF. That changes which CSS rules apply; it does not guarantee that a screen-designed layout will paginate well.
Let the user print selected React content
Use the browser’s print dialog when users should inspect the result and choose their own destination, including “Save as PDF.” A component-print helper can target a particular part of the React tree instead of printing the entire application. The react-to-print package documentation says its print-preview workflow does not itself provide a direct PDF download; if you need an automatic file, use a PDF-generation approach instead.
A minimal browser-driven print action can be triggered from React like this:
function PrintButton() {
return (
<button type="button" onClick={() => window.print()}>
Print or save as PDF
</button>
);
}The printed page should still be designed with @media print and @page. A helper such as react-to-print is useful when the target is a selected component, but it does not remove the browser’s print-preview step. Do not promise a silent save or identical output across browsers: the user’s browser and print settings remain part of this workflow.
Generate a PDF automatically with Puppeteer
For a server-side report or automated download, Puppeteer can open the rendered React page and call page.pdf(). Install Puppeteer in the project with npm install puppeteer. The following CommonJS script assumes the React app is already running at the given URL and writes the result to report.pdf:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 1000 });
await page.goto('http://localhost:3000/report', {
waitUntil: 'networkidle0',
timeout: 60000,
});
// Replace this selector with an app-specific signal that means
// the report data and React-rendered content are ready.
await page.waitForSelector('[data-report-ready="true"]', {
timeout: 30000,
});
await page.pdf({
path: 'report.pdf',
format: 'A4',
printBackground: true,
margin: {
top: '16mm',
right: '16mm',
bottom: '16mm',
left: '16mm',
},
});
} finally {
await browser.close();
}
})();Set the readiness attribute only after the application has received the necessary data and rendered the content intended for the PDF. A navigation wait alone cannot know whether an app-specific fetch, chart, lazy image, or authenticated request has completed. Puppeteer’s documentation says PDF generation waits for fonts by default, but that does not replace a readiness signal for your application.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchThe sample uses networkidle0 as a navigation condition. Pages with ongoing network activity may never become idle, so for those pages use a navigation condition that fits the app and rely on an explicit readiness signal. Ensure that the browser process is closed in a finally block so errors do not leave it running.
Control paper, colors, and pagination
Puppeteer’s PDF options let you specify paper format or explicit dimensions, orientation, margins, page ranges, scale, headers and footers, and whether to print background graphics. Background printing is off by default, and scale defaults to 1. The example sets background printing on because charts, shaded panels, or brand colors may depend on it.
Print output can render colors differently from screen output. If exact colors matter, the Puppeteer documentation points to the CSS property -webkit-print-color-adjust; still inspect the result in the environment that will generate the document. Do not assume a visual match merely because the browser viewport looks correct.
Puppeteer documents a tagged option for tagged output and marks it experimental; its documented default is false. The existence of that option is not a guarantee that a generated PDF meets your accessibility requirements. Verify the actual document against those requirements.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsUse Playwright when it fits your browser automation
Playwright also provides page.pdf(). Its documented behavior is similar in the key choice that matters here: print media is the default, and screen media can be explicitly emulated first. The API offers controls for paper formats, CSS page-size preference, backgrounds, margins, page ranges, scaling, and tagged output.
Choose Playwright if it is already the browser automation layer in your project or workflow; choose Puppeteer if that is the tooling you already operate. Both approaches require a real, rendered page and appropriate readiness handling. The documentation establishes the relevant PDF controls, but no one API is best for every React app.
With Playwright, the central operation is:
await page.pdf({
path: 'report.pdf',
format: 'A4',
printBackground: true,
margin: { top: '16mm', right: '16mm', bottom: '16mm', left: '16mm' },
});Navigate to your React route and wait for its specific ready state before calling this operation, just as in the Puppeteer example. If the document should follow screen styles, emulate screen media before PDF generation; otherwise keep print media and make the print stylesheet the source of truth.
Or skip the browser setup
If your goal is a clean capture of a public page rather than a custom React print workflow, ScreenshotNeo offers a screenshot API and MCP server. A single GET request can return a screenshot or PDF. This cURL example captures the specified page as an image; see the ScreenshotNeo documentation for PDF requests and the available options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. It is not a substitute for your own print layout when the document needs app-specific content, pagination, or styling.
Sign up for ScreenshotNeo’s free 1,000 screenshots a month—no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot common PDF problems
The PDF is blank or missing React content
The page may have loaded before its data request or client-side render finished. Wait for a selector, state marker, or other signal that your own app sets when the document is ready. Check that the route works in the same browser context and that required authentication is available to the automation.
Images, charts, or fonts are missing
Confirm that their URLs are reachable from the browser process and that lazy-loaded content has been brought into view or otherwise loaded. Font readiness is handled by Puppeteer’s PDF generation by default, but application-specific assets still need to be ready. For charts, expose a signal only after rendering is complete.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Colors or backgrounds look different
PDF generation uses print CSS by default, so inspect your @media print rules first. Enable background printing in the PDF options if backgrounds are required. If exact colors matter, account for print color adjustment and verify the output rather than comparing only against the on-screen page.
Content is clipped, tiny, or split awkwardly
Check the paper format, margins, scale, and fixed-width elements. A layout designed for a wide screen may overflow a portrait page. Adjust the print view and page-break rules, then inspect representative documents with long content, tables, and large images.
Best Value
Navigation never finishes
An app with polling, analytics, or persistent connections may not reach a network-idle state. Use a suitable navigation condition and wait separately for a meaningful application-ready marker. Avoid relying on a fixed delay as the only readiness check: rendering and network time vary.
The browser process remains open after an error
Place browser closure in a finally block, as in the Puppeteer example. This ensures cleanup whether navigation succeeds or PDF creation throws an error.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Validate output and plan for delivery
Before making a PDF flow available, inspect output from the actual route and browser environment that will produce it. Check a short page and a long one; verify page count, page breaks, images, text, colors, and links. Where accessibility or selectable text matters, test those properties explicitly rather than inferring them from the PDF-generation method.
For automated output, decide where the PDF bytes go: a server response, object storage, or another delivery mechanism. The browser’s path option is convenient for a local file, but a production service may instead return or store the generated buffer. Keep access control and any private report data within the application’s normal security model.
Performance depends on the page and its assets, so avoid generating until the content is ready and avoid rendering more interface than the document needs. Reuse browser infrastructure where appropriate for your service design, but isolate user-specific state such as cookies and authentication. No universal generation time or resource cost applies across React apps; measure with your own pages and deployment conditions.
Frequently Asked Questions
Does React itself generate the PDF?
No. React renders the interface; the browser print pipeline or browser automation creates the PDF.
Free tools Windows power users keep installed
One-click scans. No signup required.
Can I force a PDF download without showing a print dialog?
Use automated PDF generation such as Puppeteer or Playwright when your application must create a file directly. The browser print flow leaves the final action to the user.
Can the generated PDF use screen CSS?
Yes. Puppeteer and Playwright default to print media, so explicitly emulate screen media before generating if screen styling is the requirement.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
