Scribd
Upload
14 views2 pages

React-Pdf Org

Uploaded by

floryodev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views2 pages

React-Pdf Org

Uploaded by

floryodev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Edit

React-pdf
React renderer for creating PDF files on the browser and server.
v3

Quick start guide

Compatibility

Rendering process

Components Try it out!

SVG Images

Hooks

Styling

Fonts

Node API 1. Install React and react-pdf


Advanced
Starting with react-pdf is extremely simple.
Playground / REPL

Donate
Using npm

npm install @react-pdf/renderer --save

Using Yarn

yarn add @react-pdf/renderer

Using pnpm

pnpm add @react-pdf/renderer

Using Bun

bun add @react-pdf/renderer

Since a renderer simply implements how elements render into something, you still need to have React to
make it work (and react-dom for client-side document generation). You can find instructions on how to
do that here.

2. Create your PDF document

This is where things start getting interesting. React-pdf exports a set of React primitives that enable you
to render things into your document very easily. It also has an API for styling them, using CSS properties
and Flexbox layout.

Let's make the code speak for itself:

import React from 'react';


import { Page, Text, View, Document, 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 = () => (
<Document>
<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>
</Document>
);

This will produce a PDF document with a single page. Inside, two different blocks, each of them rendering
a different text. These are not the only valid primitives you can use. Please refer to the Components or
Examples sections for more information.

3. Choose where to render the document

React-pdf enables you to render the document in two different environments: web and server. The
process is essentially the same, but catered to needs of each environment.

Save in a file
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Render to a stream

v3 import ReactPDF from '@react-pdf/renderer';

ReactPDF.renderToStream(<MyDocument />);
Quick start guide

Compatibility

Rendering process Render in DOM


Components

SVG Images import React from 'react';


import ReactDOM from 'react-dom';
Hooks import { PDFViewer } from '@react-pdf/renderer';
Styling
const App = () => (
Fonts <PDFViewer>
Node API <MyDocument />
</PDFViewer>
Advanced );
Playground / REPL
ReactDOM.render(<App />, document.getElementById('root'));
Donate

4. Have fun!

Maybe the most important step — make use of all react-pdf capabilities to create beautiful and awesome
documents!

Compatibility →

You might also like