HTML to PDF with React

Introduction

HTML to PDF is the process of converting web pages or raw HTML source code into PDF documents. It is a very common practice among software developers to create invoices, reports, or any other documents needed in their organization. Many teams rely on an HTML to PDF API for this task, since APIs make it easier to integrate PDF generation into applications without managing rendering engines directly. In this article, we’ll show how React can be used in the backend in combination with Puppeteer to generate PDFs.

1. Install npm Dependencies

First, set up a Node.js project (or use your existing one) and install the required packages.

npm install react react-dom puppeteer

2. Create a React Template

We’ll create a simple React component that renders some text.

Create your template file, for example template.jsx, and paste in the following code:

import React from "react";

export const HelloPdfTemplate = () => (
  <div style={{ fontFamily: "Arial", padding: "20px" }}>
    <h1>Hello, PDF!</h1>
    <p>This PDF was generated using React + Puppeteer</p>
  </div>
);

3. Render React to HTML

Now create a new file, for example templateRender.js, and use the function renderToString from react-dom/server to convert your React component into raw HTML.

import { renderToString } from "react-dom/server";
import { HelloPdfTemplate } from "./template.js";

export function renderHelloPdf() {
  const html = renderToString(HelloPdfTemplate());
  return html;
}

4. Generate a PDF with Puppeteer

let’s create a file named generate-pdf.js and use the rendered HTML string we created above with Puppeteer to create the final PDF.

import puppeteer from "puppeteer";
import { renderHelloPdf } from "./templateRender.js";

async function createPDF() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Render React component to HTML string
  const html = renderHelloPdf();

  // Load HTML in Puppeteer
  await page.setContent(html, { waitUntil: "networkidle0" });

  // Export as PDF
  await page.pdf({
    path: "hello.pdf",
    format: "A4",
    printBackground: true,
  });

  await browser.close();
}

createPDF();

5. Run the Script

Finally run the following command to generate your PDF, and after that a hello.pdf file will appear in your local directory.

node generate-pdf.js

HTML to PDF Alternatives to Puppeteer

Puppeteer is a popular choice for HTML to PDF conversion, but there are other tools and services available:

• Playwright – Similar to Puppeteer, with broader browser support.

• wkhtmltopdf – Uses QtWebKit but has limited support for modern CSS and JavaScript.

• WeasyPrint – Renders HTML and CSS to PDF, but JavaScript is not supported.

• PrinceXML – A commercial tool with good CSS support and high-quality output.

• HTML to PDF APIs – Instead of managing a rendering engine yourself, you can use a hosted HTML to PDF API. These services handle the heavy lifting of HTML rendering and PDF generation, and are often chosen by teams that don’t want to maintain an in-house solution. Popular options include Api2Pdf, DocRaptor, PDFShift, and PDFGate.

Conclusion

By combining React with Puppeteer, you can generate PDFs directly from backend code. This approach is ideal for creating dynamic documents such as invoices, reports, or any other server-side generated PDFs.