pdforge logo

pdforge

Product

Resources

Integrations

Language Guide

Language Guide

Javascript

Javascript

How to generate PDFs from React Components using react-to-pdf

Marcelo Abreu, founder of pdforge

Marcelo | Founder of pdforge

Marcelo | Founder of pdforge

Aug 6, 2025

Aug 6, 2025

What is react-to-pdf?

react-to-pdf is a versatile React library designed for client-side PDF generation directly from JSX-based components. Leveraging html2canvas and jsPDF under the hood, it efficiently transforms React component views into downloadable PDFs without server dependency. 

Official documentation provides extensive examples and API references.

Alternative PDF libraries to generate PDF from React Components

Apart from react-to-pdf, other popular React-focused PDF libraries include:

  • react-pdf: Render PDF documents from React components directly.

  • html2pdf.js: Converts HTML content into PDF using a simplified API.

If you want to dive deeper into other JavaScript libraries to generate PDFs, we made a comparison of the best PDF javascript libraries in 2025.

React to pdf guide in 2025
React to pdf guide in 2025

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

Minimum project structure:



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 (saveopen, 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: Scale PDF Generation with Third-Party APIs

homepage of pdforge

For larger SaaS platforms requiring automated PDF generation at scale, if you're developing using no-code platforms like Bubble or creating automation workflows using platforms like n8n, make or zapier, integrating a PDF Generation API like pdforge can offload the heavy lifting.

With pdforge, you can create beautiful PDF documents in minutes using our AI-first PDF Generation. You can fine-tune de design with an easy-to-use opinionated no-code builder and start generating PDFs using our API or native integration with no-code tools. Let the AI do the heavy lifting by generating your templates, creating custom components or even filling all the variables for you.

You can handle high-volume PDF generation from a single backend call.

Here’s an example of how to generate pdf with pdforge via an API call:

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

You can create your account, experience our no-code builder and create your first layout template without any upfront payment clicking here.

If you prefer a managed service, third-party APIs like pdforge offer scalable HTML-to-PDF generation without infrastructure setup or design changes management from you. These solutions manage everything from HTML template rendering to PDF delivery.

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 pdforge will save you hours of work and deliver a high quality pdf layout.

Generating pdfs at scale can be annoying!

Generating pdfs at scale can be annoying!

Let us help you make it easier while you focus on what truly matters for your company.

Let us help you make it easier while you focus on what truly matters for your company.

7-day free trial

7-day free trial

Table of contents

Automate PDF Generation with pdforge

No code or design experience needed

AI creates your template in seconds

Fine tune the design in our no-code builder

Generate PDFs with our API or integrations