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