Skip to content

Gift-Stack/react-to-pdf

 
 

Repository files navigation

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

About

Generate pdf from react components

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%