Step 01: Setting up project (using Vite)

Initialize a new React project swiftly with Vite. Execute the following commands:

npm create vite@latest react-pdf-app -- --template react
cd react-pdf-app
npm install
npm

Step 02: Generating your first "Hello world" React PDF Component

Create a dynamic JSX component for PDF export, such as a basic invoice, using component props:

// PDFTemplate.jsx

export default function PDFTemplate({ customer, items }) {
  return (
    <div>
      <h1>Invoice</h1>
      <p>Customer: {customer}</p>
      <table>
        <thead>
          <tr>
            <th>Description</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {items.map((item, index) => (
            <tr key={index}>
              <td>{item.description}</td>
              <td>{item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Integrate this component with react-to-pdf:

// App.jsx
import { usePDF } from 'react-to-pdf';
import PDFTemplate from './PDFTemplate';

function App() {
  const { toPDF, targetRef } = usePDF({filename: 'invoice.pdf'});

  const invoiceData = {
    customer: 'John Doe',
    items: [
      { description: 'Product 1', price: '$30' },
      { description: 'Product 2', price: '$20' },
    ]
  };

  return (
    <div>
      <div ref={targetRef}>
        <PDFTemplate {...invoiceData} />
      </div>
      <button onClick={toPDF}>Download PDF</button>
    </div>
  );
}

export default App;

Advanced options of react-to-pdf

Customize your PDF outputs with advanced options:

• method (save by default): Defines action upon PDF generation (save, open, or print).

• resolution (default: 3 [Medium]): Controls the resolution scale of the generated PDF.

• canvas.mymeType (default: "image/jpeg"): Determines the image format for canvas generation.

• overrides: Allows overriding internal library configurations for html2canvas and jsPDF.

Example:

const { toPDF, targetRef } = usePDF({
  filename: 'customized.pdf',
  method: 'open',
  resolution: 7,
  canvas: { mymeType: 'image/png' },
  overrides: {
     // see https://artskydj.github.io/jsPDF/docs/jsPDF.html for more options
      pdf: {
         compress: true
      },
      // see https://html2canvas.hertzen.com/configuration for more options
      canvas: {
         useCORS: true
      }
  }
});

Step 03: Running your product with Vite

Launch your React PDF generation project by running:

npm

Navigate to http://localhost:5173 in your browser. Clicking the "Download PDF" button will save the PDF file directly to your device, unless the method is configured otherwise (e.g., "open" to preview in-browser).

Alternative: Generate PDFs with pdf noodle

Managing HTML-to-PDF conversion at scale can quickly become a nightmare!

Especially in serverless environments where cold starts, memory limits, and headless browser quirks love to break at the worst possible time (we even wrote a full article about it). Add constant template iterations, version control headaches, and the need to support non-technical contributors, and suddenly your “simple PDF library” turns into an ongoing engineering project.

pdf noodle eliminates all of that.

Instead of maintaining brittle infrastructure or wrestling with outdated pdf libraries, pdf noodle gives you a battle-tested PDF generation API that just works!

Fast, scalable, and designed for both developers and non-developers. You send raw HTML or use our AI-powered template builder, and pdf noodle handles the rendering, scaling, optimization, and delivery so your team doesn’t have to.

Here's an example of a simple API request to generate your pixel-perfect PDF with just a few lines of code:

fetch('https://api.pdfnoodle.com/v1/html-to-pdf/sync', {
  method: 'POST',
  body: JSON.stringify({ html:'your-html' }),
  headers: { 'Authorization' : 'Bearer your-api-key' }
});

pdf noodle also includes a powerful AI Agent that can generate PDF templates instantly, along with a modern editor for refining the design, also using AI, to match your brand. You don't need developing or design experience to quickly update layouts, adjust styling, and manage template versions.

Here’s a quick demo showing how it works:

You can create your account and design your first template without any upfront payment.

Conclusion

Choosing react-to-pdf simplifies client-side PDF generation directly from React components, although you’ll still need to handle layout breaks and some CSS incompatibilities due to jsPDF and html2canvas limitations.

If you don't want to waste time maintaining pdfs layouts and their infrastructure or if you don't want to keep track of best practices to generate PDFs at scale, third-party PDF APIs like pdf noodle will save you hours of work and deliver a high quality pdf layout.