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
🌐
React-pdf
react-pdf.org
React-pdf
React renderer for creating PDF files on the browser and server
Styling
React renderer for creating PDF files on the browser and server
Advanced
React renderer for creating PDF files on the browser and server
Components
React renderer for creating PDF files on the browser and server
Rendering process
React renderer for creating PDF files on the browser and server
🌐
GitHub
github.com › danomatic › react-pdf-html
GitHub - danomatic/react-pdf-html: Render HTML in react-pdf
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 200 users
Forked by 48 users
Languages   TypeScript 90.5% | JavaScript 9.5%
🌐
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
🌐
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-html
react-pdf-html - npm
Html component for react-pdf with CSS support. Latest version: 2.1.3, last published: 9 months ago. Start using react-pdf-html in your project by running `npm i react-pdf-html`. There are 22 other projects in the npm registry using react-pdf-html.
      » npm install react-pdf-html
    
Published   Jan 15, 2025
Version   2.1.3
Author   Dan Blaisdell [email protected]
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.

🌐
Nutrient
nutrient.io › blog › sdk › how to build a reactjs pdf viewer with react pdf
React PDF viewer: Complete guide to building with react-pdf in 2025
August 12, 2025 - This guide covered three approaches to building a React PDF viewer: basic HTML embedding, the react-pdf library, and Nutrient’s comprehensive SDK.
🌐
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.
Find elsewhere
🌐
Nutrient
nutrient.io › blog › sdk › how to convert html to pdf using react
Generate PDFs from HTML in React with jsPDF
May 14, 2025 - If you want to change any of these ... in the jsPDF documentation(opens in a new tab). jsPDF provides a method called html()(opens in a new tab) to convert HTML to PDF....
🌐
npm
npmjs.com › package › react-to-pdf
react-to-pdf - npm
Create PDF documents from React Components. Latest version: 2.0.3, last published: 17 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   Nov 25, 2025
Version   2.0.3
Author   Marcos Andrei Ivanechtchuk
🌐
npm
npmjs.com › package › react-pdf
react-pdf - npm
Display PDFs in your React app as easily as if they were images.. Latest version: 10.2.0, last published: 2 months ago. Start using react-pdf in your project by running `npm i react-pdf`. There are 985 other projects in the npm registry using ...
      » npm install react-pdf
    
Published   Oct 09, 2025
Version   10.2.0
Author   Wojciech Maj
🌐
IronPDF
ironpdf.com › ironpdf blog › node pdf tools › html to pdf react
Convert HTML to PDF in React (Developer Tutorial) | IronPDF
July 29, 2025 - 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.
🌐
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
January 15, 2025 - A free, fast, and reliable CDN for react-pdf-html. Html component for react-pdf with CSS support
Published   Aug 13, 2021
🌐
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
🌐
Reddit
reddit.com › r/reactjs › is there a way to generate pdf out of react and tailwind
r/reactjs on Reddit: Is there a way to generate pdf out of react and tailwind
February 8, 2024 -

I'm looking for html to pdf solution that supports react and tailwind (I'm using NextJS 14.1 and it's app router)

I tried `react-pdf`, it kinda works but I get a bunch of errors and it feels slugish, plus you can't use tailwind with it and you have to use their custom components which is not very intuitive

I also tried `jspdf` but the styling of tailwind are not fully working and present in the generated pdf, also for some reason the content is too zoomed in and there's too much space between words and a few more design problems that makes it virtually not a valid solution

🌐
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).
🌐
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.
🌐
GitHub
github.com › diegomura › react-pdf › issues › 888
Render custom HTML markup inside pdf document · Issue #888 · diegomura/react-pdf
March 20, 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...
Published   May 04, 2020
🌐
GitHub
github.com › wojtekmaj › react-pdf
GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
Display PDFs in your React app as easily as if they were images. - wojtekmaj/react-pdf
Starred by 10.7K users
Forked by 981 users
Languages   TypeScript 94.3% | CSS 5.6% | HTML 0.1%