Github url

react-pdf

by diegomura

diegomura /react-pdf

📄 Create PDF files using React

7.8K Stars 524 Forks Last release: about 1 year ago (v1.6.0) MIT License 548 Commits 128 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React renderer for creating PDF files on the browser and server

How to install

yarn add @react-pdf/renderer

How it works

import React from 'react'; import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; // Create styles const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#E4E4E4' }, section: { margin: 10, padding: 10, flexGrow: 1 } }); // Create Document Component const MyDocument = () =\> ( <page size="A4" style="{styles.page}">
      <view style="{styles.section}">
        <text>Section #1</text>
      </view>
      <view style="{styles.section}">
        <text>Section #2</text>
      </view>
    </page>);

Web.

Render in DOM

import React from 'react'; import ReactDOM from 'react-dom'; import { PDFViewer } from '@react-pdf/renderer'; const App = () =\> ( <pdfviewer>
    <mydocument></mydocument>
  </pdfviewer>); ReactDOM.render(<app></app>, document.getElementById('root'));

Node.

Save in a file

import React from 'react'; import ReactPDF from '@react-pdf/renderer'; ReactPDF.render(<mydocument></mydocument>, `${__dirname}/example.pdf`);

Examples

For each example, try opening

output.pdf

to see the result.

|
Text |
Images |
Resume |
Fractals |

|
Knobs |
Page wrap |

To run the examples, first clone the project and install the dependencies:

sh git clone https://github.com/diegomura/react-pdf.git cd react-pdf yarn install

Then, run

yarn example -- <example-name></example-name>
sh yarn example -- fractals

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Sponsors

Thank you to all our sponsors! [Become a sponsors]

Backers

Thank you to all our backers! [Become a backer]

License

MIT © Diego Muracciole

FOSSA Status


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.