react-to-pdf

    0.0.14 • Public • Published

    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

    Install

    npm i react-to-pdf

    DownloadsWeekly Downloads

    8,287

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    7

    Last publish

    Collaborators

    • ivmarcos