PDF from React Component

 by Robin Wieruch
 - Edit this Post

A brief tutorial on how to generate a PDF from a React component. Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your application as PDF. For example, when you display charts based on data, a user should be able to export the chart as PDF. In this React tutorial, I want to show you how it works.

First, you have to declare a certain area in your application that should be downloadable as PDF by using a :

const App = () => {
const printRef = React.useRef();
return (
<div>
<div>I will not be in the PDF.</div>
<div ref={printRef}>I will be in the PDF.</div>
</div>
);
};

Second, create a button with an where you will implement the logic to download the part of the component as PDF:

const App = () => {
const printRef = React.useRef();
const handleDownloadPdf = () => {
// TODO: logic
};
return (
<div>
<button type="button" onClick={handleDownloadPdf}>
Download as PDF
</button>
<div>I will not be in the PDF.</div>
<div ref={printRef}>I will be in the PDF.</div>
</div>
);
};

Third, install the libraries called html2canvas and jspdf via your command line:

npm install html2canvas jspdf

And fourth, use the library to draw the component on a canvas, to transform it into an image, and finally to transform it into a PDF:

import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
const App = () => {
const printRef = React.useRef();
const handleDownloadPdf = async () => {
const element = printRef.current;
const canvas = await html2canvas(element);
const data = canvas.toDataURL('image/png');
const pdf = new jsPDF();
const imgProperties = pdf.getImageProperties(data);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight =
(imgProperties.height * pdfWidth) / imgProperties.width;
pdf.addImage(data, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('print.pdf');
};
return (
<div>
<button type="button" onClick={handleDownloadPdf}>
Download as PDF
</button>
<div>I will not be in the PDF.</div>
<div ref={printRef}>I will be in the PDF.</div>
</div>
);
};

That's it. The code makes sure that the aspect ratio is preserved and that the image fits the width of the PDF. If you want to go a bit further and download an image instead of a PDF, then head over to this tutorial: .

Keep reading about 

This tutorial is outdated. Please read over here everything you need to know about React Ref . In the past there has been a lot of confusion around the ref attribute in React. The attribute makes…

A brief tutorial on how to generate an image (JPG or PNG) from a React component . Use case: Sometimes when you have a React project, you want to give users the ability to download an area of your…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.