To turn an existing React-rendered page into a PDF, use the browser’s print pipeline: add print-specific CSS, then let the user save from the print dialog or generate the PDF with a headless browser. If you are building a separate document rather than converting an existing page, use @react-pdf/renderer and its PDF-specific React components. The right choice depends on whether you need to preserve web-page layout, automate server output, or control a purpose-built document.
Choose a conversion path
“HTML to PDF in React JS” can mean either printing a page that React already rendered or constructing a PDF document with React. Those are different jobs. A browser print pipeline uses HTML and CSS as rendered by a browser; React-PDF uses its own document primitives and styling model.
| Approach | Best fit | Where it runs | Main trade-off |
|---|---|---|---|
| Browser print dialog | A user wants to save the current rendered page | User’s browser | User initiates printing and chooses the PDF destination |
| Puppeteer or Playwright PDF API | Automated downloads, batch jobs, or server-generated documents | Server or other environment with a browser runtime | Requires browser setup and careful loading and pagination handling |
@react-pdf/renderer |
A distinct document with deliberately controlled structure | Browser or server | Requires composing PDF-specific primitives, not arbitrary existing HTML/CSS |
react-pdf-html |
Adapting some HTML into a React-PDF document | Where React-PDF runs | CSS and layout support is bounded by React-PDF’s supported features |
Print an existing React page in the browser
If the content already appears correctly in your app, start with print CSS rather than building a second document representation. The user can invoke the browser’s print interface, then select its save-as-PDF option. MDN’s printing guidance covers print stylesheets and browser printing behavior; this approach leaves the final print dialog and destination under the user’s control.
Add print-specific styles
Use @media print to hide controls that do not belong in the document, adjust color and spacing, and avoid cutting important content at page boundaries. Page-size and margin rules can also be declared for print. These rules influence browser output, but they do not guarantee identical pagination in every browser or for every layout.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
/* styles.css */
@media print {
.no-print,
nav,
button {
display: none !important;
}
body {
color: #000;
background: #fff;
}
main {
width: auto;
margin: 0;
}
h1,
h2,
h3 {
break-after: avoid;
}
table,
figure {
break-inside: avoid;
}
}
@page {
size: A4;
margin: 18mm;
}Adapt the selectors to your application. For example, hide a sidebar or interactive navigation by class rather than hiding every button if buttons are meaningful document content. For reports with long tables, test how rows split across pages; an instruction to avoid breaking an entire large table can produce awkward blank areas.
Expose a print action
Call the browser’s window.print() method from a user action. This opens the print interface; it does not silently save a PDF or let the page pick a file path.
import React from 'react';
export function PrintButton() {
return (
<button className="no-print" onClick={() => window.print()}>
Print or save as PDF
</button>
);
}Before the user prints, make sure the view has finished loading its data. If images, charts, or custom fonts arrive asynchronously, expose an intentional ready state or give the user a clear way to wait before printing. Inspect the saved result at the page boundaries, not just the first page.
Generate PDFs automatically with a headless browser
For a server-generated PDF, load the React page in a real browser runtime and call its PDF API. Puppeteer and Playwright both document page.pdf() as using print CSS media by default. Their documentation also describes emulating screen media when that is desired; print output may alter colors, and both document -webkit-print-color-adjust as a way to request print colors.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsThe following Puppeteer example shows the core flow. Install Puppeteer in the project, make the target page available to the browser process, and set the URL to a page that renders the document. This is a server-side outline: adapt the route, authentication, and output location to your application.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('http://localhost:3000/report/123', {
waitUntil: 'networkidle0',
});
await page.pdf({
path: 'report.pdf',
format: 'A4',
printBackground: true,
preferCSSPageSize: true,
});
} finally {
await browser.close();
}The options shown request an A4 page, background printing, and preference for CSS page sizing. Confirm the options against the installed Puppeteer version before relying on them in production. Puppeteer’s guide describes the launch, navigation, and PDF flow and notes that PDF generation waits for fonts by default. That does not mean every application asset or data fetch is ready: define an application-level readiness condition if network quiet alone cannot guarantee the report is complete.
Playwright offers the same general architecture with its own browser and page APIs. Its page.pdf() uses print media by default as well. Choose one automation stack already suited to your deployment rather than assuming the two libraries are interchangeable in all setup details.
When print styles should not be used
If your PDF should use screen styling rather than print styling, explicitly emulate screen media using the mechanism in Puppeteer or Playwright documentation. Decide this intentionally: screen layout may be designed for scrolling rather than fixed paper dimensions, so a wide viewport layout can shrink or clip when placed on pages.
Build a dedicated PDF with React-PDF
When the PDF is a separate document—such as an invoice with carefully controlled sections—@react-pdf/renderer lets you compose it from Document, Page, View, and Text primitives. Its styling uses its own StyleSheet API. The official v4 quick start documents browser and server rendering, including files, streams, and a DOM viewer.
This example illustrates the document model. It is not an HTML/CSS drop-in conversion: rewrite the document using the renderer’s components and supported style properties.
import React from 'react';
import {
Document,
Page,
Text,
View,
StyleSheet,
PDFDownloadLink,
} from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: { padding: 36, fontSize: 12 },
title: { fontSize: 20, marginBottom: 16 },
row: { marginBottom: 8 },
});
function ReportDocument({ report }) {
return (
<Document>
<Page size="A4" style={styles.page}>
<Text style={styles.title}>{report.title}</Text>
{report.items.map((item) => (
<View style={styles.row} key={item.id}>
<Text>{item.label}: {item.value}</Text>
</View>
))}
</Page>
</Document>
);
}
export function DownloadReport({ report }) {
return (
<PDFDownloadLink
document={<ReportDocument report={report} />}
fileName="report.pdf"
>
{({ loading }) => loading ? 'Preparing PDF…' : 'Download PDF'}
</PDFDownloadLink>
);
}Install and use the package version documented by the project’s current quick start; APIs and supported styles can change between versions. Test long content, fonts, images, and page breaks with the actual data shapes your app emits.
Adapt HTML with react-pdf-html
react-pdf-html parses HTML into a node tree and maps block/container elements to View, inline text to Text, images to Image, and links to Link. It documents style-tag and inline-style support for properties React-PDF supports, plus basic tables and lists.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, 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 minuteIt can reduce rewriting when the source starts as HTML, but it is not a browser rendering engine. Before committing to it, render a representative document containing the CSS selectors, tables, lists, images, links, and page breaks your output needs. Inspect the PDF rather than judging only whether conversion completes.
Best Value
Make output reliable and readable
- Wait for the document, not just navigation. Client-side React may still be fetching data or drawing charts after the initial page load. Use an application-ready signal where necessary.
- Check fonts and images. Missing or late assets change line wrapping and pagination. Puppeteer’s guide notes its PDF generation waits for fonts by default; still verify other resources and the final result.
- Design for paper dimensions. Specify page size and margins, remove navigation and controls, and review page breaks, long tables, headers, and footers.
- Review print colors. Browser printing can modify colors. Request print color adjustment when exact colors matter, then inspect the PDF in the environments your readers use.
- Account for the execution environment. Browser automation requires a compatible browser runtime and operational setup on the server. Browser printing instead relies on user interaction; React-PDF avoids using a browser page as the PDF layout engine.
- Inspect representative documents. Verify short and long reports, empty data, unusually long values, and page-boundary cases. CSS and pagination behavior depend on the selected renderer and browser.
Troubleshooting common problems
| Symptom | Likely cause | What to do |
|---|---|---|
| The PDF is missing React data | Capture began before client-side data or rendering completed | Wait for the application’s ready state before calling the PDF API; do not rely on navigation completion alone. |
| Styles differ from the on-screen page | PDF generation uses print media by default | Add or correct @media print rules, or explicitly emulate screen media if that is the intended design. |
| Backgrounds or colors are absent | Print color handling differs from screen rendering | Request background printing in the automation API and use -webkit-print-color-adjust when exact colors are needed; inspect the resulting file. |
| Text wraps differently or pages overflow | Paper width, margins, fonts, or long content differ from the viewport layout | Set page dimensions and margins, confirm fonts have loaded, and test long strings and tables in print layout. |
| Images are missing | Asset requests were not complete or accessible when capture occurred | Ensure image URLs resolve in the browser context and wait for the app’s asset-loading condition before generating. |
| HTML adapter output loses styling | The CSS property or structure is outside the supported React-PDF subset | Check the adapter and React-PDF supported properties; simplify the markup or author that part with React-PDF primitives. |
| The print button does not silently download | window.print() opens the browser’s print interface rather than saving to a chosen path |
Use server-side browser automation for unattended generation, or let the user select Save as PDF in the print dialog. |
Or skip the browser setup
If your goal is a PDF or screenshot of a page available at a URL, ScreenshotNeo is a website screenshot API and MCP server. It can return a screenshot or PDF from one GET request. This is URL capture, not a converter for an arbitrary in-memory React component that has not been served as a page.
For example, this cURL request captures a page image; see the ScreenshotNeo API documentation for the API’s options and PDF use.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Can I convert a React component that is not on a page into a PDF?
Not with a browser page capture until you render it in a page; use a dedicated document renderer such as React-PDF when the component should be authored as a PDF document.
Which approach is best for an invoice with a fixed document layout?
A PDF-specific renderer is often the more direct fit when you want a separate document structure rather than a print version of a web page.
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.
