Free tools Windows power users keep installed
One-click scans. No signup required.
To make a PDF from a React app, either let the user print a prepared view and choose “Save as PDF,” or render the page in a headless browser and call its PDF API for an automatically generated file. React supplies the interface; the browser’s print pipeline handles the PDF. For automation, Puppeteer and Playwright both provide page.pdf(). Choose based on whether a person should review the print dialog, whether you need one component or a whole page, and where the PDF must be created.
Choose the right PDF workflow
Start with who initiates the PDF and where the result is delivered. These are different workflows, not interchangeable ways to trigger a download.
| Need | Approach | What to expect |
|---|---|---|
| A user reviews output and chooses where to save it | Browser print flow, optionally with react-to-print for a selected component |
The browser’s print dialog remains in control. It is not a silent, automatic PDF download. react-to-print’s package documentation says it cannot directly save a PDF outside the print-preview flow. |
| An application creates and delivers a PDF automatically | Headless browser with Puppeteer or Playwright | Navigate to the rendered app page, wait until its content is ready, then call page.pdf() and save or return the resulting file. |
| A clean image of a page, rather than a document PDF | Screenshot API | This makes a raster image, not an equivalent substitute for a document PDF. Confirm the app’s text, links, accessibility and pagination requirements before choosing an image-based output. |
Both Puppeteer and Playwright generate PDFs using print CSS by default. If the PDF should look like the screen instead, explicitly emulate screen media before calling the PDF method. See the Puppeteer Page.pdf() API and Playwright Page API.
Prepare a print-ready React view
Do not treat the current interactive screen as a finished document by default. Create a stable view—often a dedicated route or component—that includes the report, invoice or article content intended for the PDF and excludes navigation, buttons and other controls. Keep data rendering deterministic, and make the view’s loading state distinct from its ready state so the browser does not capture a partially rendered page.
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 →#1 Best Overall
Add print-specific CSS
Print CSS lets the same React content lay out for paper. Set page dimensions and margins deliberately, remove controls, and use page-break rules where a section should start or stay together. For example:
@media print {
@page {
size: A4 portrait;
margin: 16mm;
}
.screen-only,
nav,
button {
display: none !important;
}
.report-section {
break-inside: avoid;
}
.new-page {
break-before: page;
}
}Adjust selectors to the app; hiding every button, for example, is inappropriate if a button-like element is actually part of the document. Verify long tables, charts and repeated headers in the generated result instead of assuming browser pagination will match the screen layout.
Print a selected component with react-to-print
react-to-print is useful when the user should print one React component rather than the entire page. Its role is to hand selected content to the browser print flow. It does not by itself turn that flow into a direct PDF file download; users still use the print dialog, commonly choosing Save as PDF. If automatic delivery is a requirement, use a headless browser instead.
Generate a PDF automatically with Puppeteer
Puppeteer’s documented pattern is to launch a browser, navigate to a URL, generate a PDF and close the browser. Its guide notes that PDF generation waits for fonts by default, but that does not mean React data requests, lazy images or charts are ready. Use an application-specific readiness signal or wait for a selector that only appears once the printable content is complete. Consult the Puppeteer PDF generation guide.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Example Node.js script for a locally running React app:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.goto('http://localhost:3000/report/123', {
waitUntil: 'networkidle0',
});
// Prefer an explicit app readiness marker over assuming navigation means
// that all React data, charts and lazy assets are finished.
await page.waitForSelector('[data-pdf-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();
}Install Puppeteer in the project using its documented installation instructions. The example assumes the app exposes the chosen readiness marker after its printable content is ready; add that marker in React only when data and essential assets are prepared. The navigation condition is not a substitute for that signal.
Choose print or screen styling
page.pdf() uses print media by default. If the design should use screen CSS, emulate screen before creating the PDF:
await page.emulateMediaType('screen');
await page.pdf({ path: 'report.pdf', format: 'A4' });For a conventional paper document, leave the default print media in effect. Puppeteer also notes that printed colors can differ from screen colors; when color fidelity is required, its documentation points to the CSS property -webkit-print-color-adjust. Apply it selectively, then inspect the actual PDF.
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 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteSet output options deliberately
Puppeteer’s API supports paper format or explicit dimensions, orientation, margins, page ranges, scale, header and footer templates, and background graphics. In its API, background printing defaults to off and scale defaults to 1. For a report that relies on colored backgrounds, set printBackground: true. For a fixed-size form, use explicit dimensions or a paper format and validate that the content fits. A page range can omit unwanted pages, but it is not a replacement for correcting an unexpected blank page or bad page break.
The API also documents a tagged option for tagged PDF output as experimental, with a default of false. Its availability is not a guarantee that a generated PDF meets an accessibility requirement; validate the resulting file against the applicable standard and user needs.
Use Playwright as an alternative
Playwright also offers page.pdf(), with print media as the default and an option to emulate screen media first. Its API documents paper formats, CSS page-size preference, backgrounds, margins, ranges, scale and tagged output. The general workflow is the same: open a page in a browser context, wait for the app’s own ready state, call page.pdf(), and save or return the result. See the Playwright Page API for the current method signature and supported options.
Choose Puppeteer or Playwright based on the browser automation already used by your application and the execution environment you can support. The cited API documentation establishes their PDF controls; it does not establish a universal winner for every React app.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesCheck readiness, layout and file delivery
- Choose the content boundary. Decide whether the document contains a selected component, a print route or the full rendered page.
- Finish application rendering. Wait for React data, charts, images and authenticated resources that belong in the output. A successful page navigation alone does not prove these are ready.
- Set media and paper rules. Use print CSS for document layout, or explicitly emulate screen if that is the intended design. Set paper size, margins, orientation, scaling and background printing as needed.
- Generate and deliver. In an automated workflow, save the PDF or return its buffer through the application’s download/response path. In a user-driven workflow, open the browser print dialog and let the user choose an output destination.
- Inspect representative PDFs. Check page breaks, clipped content, missing images, unexpected colors, blank pages and whether the output meets text-selection and accessibility needs.
Common problems and fixes
- PDF contains a loading state or missing chart: add an app-specific ready marker and wait for it before PDF generation. The default font wait does not wait for arbitrary React data or third-party assets.
- PDF looks different from the browser: print CSS is the default for
page.pdf(). Use screen media emulation only if screen styling is desired; otherwise refine the print stylesheet. - Background colors disappear: enable background printing in the PDF options. Puppeteer documents it as off by default.
- Content is cut off or split awkwardly: check the chosen paper size, margins, scale and print-specific break rules. Inspect tables and large components across page boundaries.
- Colors are muted or altered: printed color behavior can differ from screen. Consider
-webkit-print-color-adjustfor elements where exact colors matter and verify the PDF in a viewer. - Expected automatic download opens a print dialog: that is the browser print workflow, including a typical
react-to-printsetup. For a file created without user interaction, generate it through Puppeteer or Playwright. - PDF text or accessibility behavior is uncertain: do not assume a screenshot-based output or an experimental tagged-PDF option meets the requirement. Inspect the produced file and validate against the specific need.
Or skip the browser setup
If the requirement is a screenshot of the React page rather than a paginated, document-style PDF, ScreenshotNeo can capture a URL through its screenshot API. Its API can return PNG, JPEG or WebP, or a PDF. For a PDF response, use the API’s PDF options; an image screenshot should not be treated as equivalent to a document PDF.
One-call cURL example, using a page that is publicly reachable by the capture service:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for authentication, PDF parameters and the other request options. Cookie banners are accepted or removed before capture, along with supported newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status. ScreenshotNeo also provides an MCP server so AI agents can take screenshots. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan to try a capture with 1,000 screenshots a month and no card.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
How to decide
Use browser printing when a person needs to review a React component and control the final save action. Use Puppeteer or Playwright when your application must create and deliver a PDF automatically. In either automated route, treat the React page’s readiness, print CSS and PDF inspection as part of the implementation—not as details the PDF API can infer for you.
Best Value
Frequently Asked Questions
Does react-to-print directly download a PDF?
No. Its documented flow uses the browser print preview; direct PDF saving requires a separate generation approach.
Can page.pdf() use the screen version of my React page?
Yes. It uses print media by default, so explicitly emulate screen media before generating the PDF when that is what you want.
Does Puppeteer wait for my React data and charts before making a PDF?
It waits for fonts by default, but application-specific data and assets need their own readiness signal or waits.
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.
