react-to-pdf

React to PDF

Easily create pdf documents from React components.

Install

$ npm install react-to-pdf

Important Notes

• No SSR
• Single page
• Not vectorized - the pdf is created from a screenshot of the component and therefore is not vectorized. If you are looking for something more advanced for generating pdf using React components, please check out other popular alternatives packages listed below.

Alternatives and Similars Packages

• @react-pdf/renderer - React renderer for creating PDF files on the browser and server
• react-pdf - Display PDFs in your React app as easily as if they were images.

Examples

https://codesandbox.io/s/l2l4pz0jyl

Usage

Using inner target ref

<ReactToPdf>
    {({toPdf, targetRef}) =>  (
        <div style={{width: 500, height: 500, background: 'red'}} onClick={toPdf} ref={targetRef}/>
    )}
</ReactToPdf>

Using outer target ref

const ref = React.createRef();

<div>
    <ReactToPdf targetRef={ref} filename="div-blue.pdf">
        {({toPdf}) => (
            <button onClick={toPdf}>Generate pdf</button>
        )}
    </ReactToPdf>
    <div style={{width: 500, height: 500, background: 'blue'}} ref={ref}/>
</div>

Advanced options

const ref = React.createRef();
const options = {
    orientation: 'landscape',
    unit: 'in',
    format: [4,2]
};
<div>
    <ReactToPdf targetRef={ref} filename="div-blue.pdf" options={options} x={.5} y={.5} scale={0.8}>
        {({toPdf}) => (
            <button onClick={toPdf}>Generate pdf</button>
        )}
    </ReactToPdf>
    <div style={{width: 500, height: 500, background: 'blue'}} ref={ref}/>
</div>

Props

Prop name	Type	Default	Description
filename	string	'download.pdf'	Name of the pdf file
targetRef	RefObject		React ref for the target component (use this or inner target reference)
x	number	0	X position in document
y	number	0	Y position in document
options	object	undefined	options for the jsPdf document - view more details
onComplete	function	undefined	callback executed when process is finished
scale	number	1	Image scaling

Changelog

0.0.12 (September 2, 2020)

• Upgraded eslint
• Fixed conflicted code in source
• Const to var in index
• Support UMD