Rendering react as pdf is generally a pain, but there is a way around it using canvas.

The idea is to convert : HTML -> Canvas -> PNG (or JPEG) -> PDF

To achieve the above, you'll need :

  1. html2canvas &
  2. jsPDF

import React, {Component, PropTypes} from 'react';

// download html2canvas and jsPDF and save the files in app/ext, or somewhere else
// the built versions are directly consumable
// import {html2canvas, jsPDF} from 'app/ext';


export default class Export extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0);
        // pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
      <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      <div id="divToPrint" className="mt4" {...css({
        backgroundColor: '#f5f5f5',
        width: '210mm',
        minHeight: '297mm',
        marginLeft: 'auto',
        marginRight: 'auto'
      })}>
        <div>Note: Here the dimensions of div are same as A4</div> 
        <div>You Can add any component here</div>
      </div>
    </div>);
  }
}

The snippet will not work here because the required files are not imported.

An alternate approach is being used in this answer, where the middle steps are dropped and you can simply convert from HTML to PDF. There is an option to do this in the jsPDF documentation as well, but from personal observation, I feel that better accuracy is achieved when dom is converted into png first.

Update 0: September 14, 2018

The text on the pdfs created by this approach will not be selectable. If that's a requirement, you might find this article helpful.

Answer from Shivek Khurana on Stack Overflow
🌐
GitHub
github.com › danomatic › react-pdf-html
GitHub - danomatic/react-pdf-html: Render HTML in react-pdf · GitHub
const html = `<div style="width: 200px; height: 200px; background-color: pink">Foobar</div>`; return ( <Document> <Page> <Html>{html}</Html> </Page> </Document> ); Remote styles must be resolve asynchronously, outside of the React rendering, because react-pdf doesn't support asynchronous rendering
Starred by 212 users
Forked by 51 users
Languages   TypeScript 90.5% | JavaScript 9.5%
🌐
React-pdf
react-pdf.org
React-pdf
React renderer for creating PDF files on the browser and server
Discussions

reactjs - Generating a PDF file from React Components - Stack Overflow
Rendering react as pdf is generally a pain, but there is a way around it using canvas. The idea is to convert : HTML -> Canvas -> PNG (or JPEG) -> PDF More on stackoverflow.com
🌐 stackoverflow.com
Render custom HTML markup inside pdf document
Hi all, I am trying to render HTML inside the / component while rendering the PDF inside the using a Template. I'd like to render my custom HTML code s... More on github.com
🌐 github.com
26
May 4, 2020
How can I generate a pdf?
This is a job for the back-end. While browsers can often read PDFs, they weren't made to create them. If you do it on the client-side, you may introduce bugs in the PDF rendering due to slight browser inconsistencies. It could be such a stupid things as which the default font size of the browser is: the user may have changed it. You definitely want your PDF generator to be predictable, otherwise your users will have a bad time. I'm sure that you can find a lot of resources if you Google "html to pdf python", because there are many HTML to PDF converters out there, for a multitude of languages and frameworks. This is not a new problem, fortunately! How you generate the HTML now becomes a matter of preference. But may I suggest server-side rendering a React component and shipping said HTML to the converter? Good luck! More on reddit.com
🌐 r/reactjs
56
27
January 18, 2024
Using react-pdf?
I recently migrated away to normal browser rendering, because compatibility is really bad and seemingly no maintenance is happening (400+ open issues, 30+ open PRs) - would've even paid for a paid license, given how widespread the use is, but if it doesn't work... More on reddit.com
🌐 r/reactjs
10
20
July 21, 2025
🌐
npm
npmjs.com › package › react-pdf-html
react-pdf-html - npm
Html component for react-pdf with CSS support. Latest version: 2.1.5, last published: 3 months ago. Start using react-pdf-html in your project by running `npm i react-pdf-html`. There are 24 other projects in the npm registry using react-pdf-html.
      » npm install react-pdf-html
    
Published   Dec 29, 2025
Version   2.1.5
Author   Dan Blaisdell dan@manifestwebdesign.com
🌐
Nutrient
nutrient.io › blog › sdk › how to convert html to pdf using react
How to convert HTML to PDF in React with jsPDF
February 9, 2026 - Convert HTML to PDF in React without a server. This guide covers importing jsPDF(opens in a new tab), referencing JSX with useRef, and exporting a PDF — plus custom page sizes, multiple pages, and custom fonts.
Top answer
1 of 13
168

Rendering react as pdf is generally a pain, but there is a way around it using canvas.

The idea is to convert : HTML -> Canvas -> PNG (or JPEG) -> PDF

To achieve the above, you'll need :

  1. html2canvas &
  2. jsPDF

import React, {Component, PropTypes} from 'react';

// download html2canvas and jsPDF and save the files in app/ext, or somewhere else
// the built versions are directly consumable
// import {html2canvas, jsPDF} from 'app/ext';


export default class Export extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0);
        // pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
      <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      <div id="divToPrint" className="mt4" {...css({
        backgroundColor: '#f5f5f5',
        width: '210mm',
        minHeight: '297mm',
        marginLeft: 'auto',
        marginRight: 'auto'
      })}>
        <div>Note: Here the dimensions of div are same as A4</div> 
        <div>You Can add any component here</div>
      </div>
    </div>);
  }
}

The snippet will not work here because the required files are not imported.

An alternate approach is being used in this answer, where the middle steps are dropped and you can simply convert from HTML to PDF. There is an option to do this in the jsPDF documentation as well, but from personal observation, I feel that better accuracy is achieved when dom is converted into png first.

Update 0: September 14, 2018

The text on the pdfs created by this approach will not be selectable. If that's a requirement, you might find this article helpful.

2 of 13
19

@react-pdf/renderer is a great resource for this.

It is a bit time consuming converting your markup and CSS to React-PDF's format, but it is easy to understand. Exporting a PDF and from it is fairly straightforward.

To allow a user to download a PDF generated by react-PDF, use their on the fly rendering, which provides a customizable download link. When clicked, the site renders and downloads the PDF for the user.

Here's their REPL which will familiarize you with the markup and styling required. They have a download link for the PDF too, but they don't show the code for that here.

🌐
npm
npmjs.com › package › react-to-pdf
react-to-pdf - npm
3 weeks ago - Create PDF documents from React Components. Latest version: 3.2.2, last published: 19 days ago. Start using react-to-pdf in your project by running `npm i react-to-pdf`. There are 28 other projects in the npm registry using react-to-pdf.
      » npm install react-to-pdf
    
Published   Mar 18, 2026
Version   3.2.2
Author   Marcos Andrei Ivanechtchuk
🌐
GitHub
github.com › josippapez › react-pdf-html
GitHub - josippapez/react-pdf-html: Package for displaying @react-pdf/renderer components as html elements
react-pdf-html is a package that provides components that can render @react-pdf/renderer components as HTML components.
Author   josippapez
Find elsewhere
🌐
CodeSandbox
codesandbox.io › examples › package › react-pdf-html
react-pdf-html examples - CodeSandbox
unified-react-pdfA React component library for rendering & building fully parseable PDF files from HTML/CSS
🌐
npm
npmjs.com › package › react-pdf
react-pdf - npm
February 25, 2026 - Display PDFs in your React app as easily as if they were images.. Latest version: 10.4.1, last published: a month ago. Start using react-pdf in your project by running `npm i react-pdf`. There are 1047 other projects in the npm registry using ...
      » npm install react-pdf
    
Published   Feb 25, 2026
Version   10.4.1
Author   Wojciech Maj
🌐
CodeSandbox
codesandbox.io › s › react-pdf-html-dzx7gt
react-pdf-html - CodeSandbox
March 13, 2023 - Html component for react-pdf with CSS support
Published   Jun 06, 2022
🌐
GitHub
github.com › diegomura › react-pdf › issues › 888
Render custom HTML markup inside pdf document · Issue #888 · diegomura/react-pdf
May 4, 2020 - Hi all, I am trying to render HTML inside the / component while rendering the PDF inside the using a Template. I'd like to render my custom HTML code shown below in my pdf Pre Int...
Author   abollam
🌐
IronPDF
ironpdf.com › ironpdf blog › node pdf tools › html to pdf react
Convert HTML to PDF in React (Developer Tutorial) | IronPDF
January 19, 2026 - React-pdf: A powerful library for creating PDF documents in React applications. It supports various styling options and can create complex, multipage PDFs with ease. jsPDF: A widely-used JavaScript library for generating PDF files on the fly.
🌐
GitHub
github.com › diegomura › react-pdf
GitHub - diegomura/react-pdf: 📄 Create PDF files using React
React renderer for creating PDF files on the browser and server
Starred by 16.5K users
Forked by 1.3K users
Languages   TypeScript 84.4% | JavaScript 15.5%
🌐
Space Jelly
spacejelly.dev › posts › generate-a-pdf-from-html-in-javascript
Generate a PDF in React on Space Jelly
August 18, 2024 - PDF Kit itself doesn’t actually render HTML, but allows you to create and position elements using what it describes as an HTML5 Canvas-like API. But working in a React environment you get something a bit closer to HTML or JSX, where React PDF uses a components API and PDF Kit under the hood to give a more natural way of expressing the content (just like you would in React).
🌐
Nutrient
nutrient.io › blog › sdk › how to convert html to pdf using html2df and react
HTML to PDF in React: Convert HTML to PDF using html2pdf.js
May 7, 2025 - Learn how to convert HTML to PDF in React using html2pdf.js. This step-by-step guide covers setup, customization options, and PDF download functionality.
🌐
jsDelivr
jsdelivr.com › package › npm › react-pdf-html
react-pdf-html CDN by jsDelivr - A CDN for npm and GitHub
December 29, 2025 - A free, fast, and reliable CDN for react-pdf-html. Html component for react-pdf with CSS support
Published   Aug 13, 2021
🌐
DEV Community
dev.to › hulyamasharipov › how-to-convert-html-to-pdf-using-react-37j4
How to Convert HTML to PDF Using React - DEV Community
November 28, 2023 - In this tutorial, you’ll learn how to convert HTML into PDF using React, one of the most popular JavaScript libraries. To achieve this, you’ll use an open source package called jsPDF, which is a client-side library that doesn’t require any server-side processing.
🌐
Nutrient
nutrient.io › blog › sdk › how to build a reactjs pdf viewer with react pdf
How to build a React PDF viewer with react-pdf (2026)
January 28, 2026 - Step-by-step tutorial for building a React PDF viewer with react-pdf. Covers zoom, thumbnails, outline navigation, error handling, and TypeScript. Includes Nutrient SDK comparison.
🌐
StackBlitz
stackblitz.com › edit › react-8slnjp
Generating PDF from HTML in React - Example 4 - StackBlitz
Fourth Example from the "Generating PDF from HTML in React Demo: Exporting Invoices" Blog Post.
🌐
Mdfaisal
mdfaisal.com › blog › download-html-as-a-pdf-in-react
Download HTML as a PDF in React - Blog | Mohammad Faisal
February 18, 2021 - Here is the full code for a custom PDF downloader which takes two arguments: ... import React from 'react'; import html2canvas from "html2canvas"; import { jsPDF } from "jspdf"; const GenericPdfDownloader = ({rootElementId , downloadFileName}) => { const downloadPdfDocument = () => { const input = document.getElementById(rootElementId); html2canvas(input) .then((canvas) => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'JPEG', 0, 0); pdf.save(`${downloadFileName}.pdf`); }) } return <button onClick={downloadPdfDocument}>Download Pdf</button> } export default GenericPdfDownloader;