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
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%
🌐
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.
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
Is there a way to generate pdf out of react and tailwind
generating PDFs are notoriously hard to work with in web dev, especially generating in browser. Maybe with enough hours in you can get a 1 to 1 result, but I’d say that you should expect it not to be. You can also look at server-side generation, with may or may not fit your use case better. More on reddit.com
🌐 r/reactjs
38
13
February 8, 2024
React Js HTML => PDF : reactjs
I am making a big Meteor React Js project and I am stuck in a part where I need to print many documents. I have been using HTML2CANVAS but since... More on old.reddit.com
🌐 r/reactjs
Simple way to Get PDF from React page?
If Phantom has issues with ES6, why not use Babel in your project? More on reddit.com
🌐 r/reactjs
6
8
November 7, 2017
🌐
React
react.dev › learn
Quick Start – React
It works the same way as the HTML class attribute: ... React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your HTML.
🌐
React-pdf
react-pdf.org
React-pdf
React renderer for creating PDF files on the browser and server
🌐
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
🌐
Telerik
telerik.com › kendo-react-ui › pdfprocessing
React PDF Generator | KendoReact UI Library
The React PDF Generator enables you to export a selection or the entire content of a web page to a PDF file. Part of the feature-rich KendoReact PDF Processing library.
🌐
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
Find elsewhere
🌐
CodeBurst
codeburst.io › convert-html-to-pdf-in-react-with-react-pdf-504c9268fc82
Convert HTML to PDF in React with react-pdf | by Imran Khan
February 20, 2024 - In this lesson, you will learn how to programmatically create PDFs with React code using the react-pdf package without writing any backend…
🌐
PDF-LIB
pdf-lib.js.org
PDF-LIB · Create and modify PDF documents in any ... - JS.ORG
Works in any JavaScript runtime, ... and even React Native. Add, insert, and remove pages. Split a single PDF into separate ones. Or merge multiple PDFs into a single document. Create new forms or fill and read existing fields. Check boxes, buttons, radio groups, dropdowns, option lists, and text fields are all supported. ... <html> <head> <meta ...
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.
🌐
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

🌐
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
🌐
Medium
medium.com › @chrissyp › how-to-export-a-pdf-in-html-using-react-ffccdae8ab63
How to Export a PDF in HTML using React | by Chrissy | Medium
December 11, 2022 - That’s it! Using the react-pdf library, you can easily export your HTML as a PDF file for the user to download.
🌐
PrimeReact
primereact.org
PrimeReact | React UI Component Library
The ultimate set of UI Components to assist you with 80+ impressive React Components.
🌐
Bundlephobia
bundlephobia.com › package › react-pdf-html
react-pdf-html ❘ Bundlephobia
Find the size of javascript package react-pdf-html. Bundlephobia helps you find the performance impact of npm packages.
🌐
npm
npmjs.com › package › react-to-pdf
react-to-pdf - npm
3 weeks ago - 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
🌐
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).
🌐
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