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

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

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.