Scribd
Upload
63 views

React-Pdf: React Renderer For Creating PDF Files On The Browser and Server

This document provides instructions for using the react-pdf library to create PDF documents. It outlines the basic steps: 1) Install react-pdf and React, 2) Create a PDF document component using React primitives, and 3) Render the document to a file, stream, or in the DOM. The library exports React components that map to PDF elements and supports styling with CSS. It allows generating PDFs on the browser and server.

Uploaded by

R -ALL
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
63 views

React-Pdf: React Renderer For Creating PDF Files On The Browser and Server

This document provides instructions for using the react-pdf library to create PDF documents. It outlines the basic steps: 1) Install react-pdf and React, 2) Create a PDF document component using React primitives, and 3) Render the document to a file, stream, or in the DOM. The library exports React components that map to PDF elements and supports styling with CSS. It allows generating PDFs on the browser and server.

Uploaded by

R -ALL
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Edit

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

Quick start guide

Rendering process

Components

SVG Images
Try it out!
Hooks

Styling

Fonts

Node API

Advanced

Playground / REPL 1. Install React and


Donate
react-pdf

Starting with react-pdf is extremely


simple.

Using Yarn

yarn add @react-pdf/rendere

Using npm

npm install @react-pdf/rend


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
v2 here.

Quick start guide


2. Create your PDF
Rendering process
document
Components

SVG Images This is where things start getting


Hooks interesting. React-pdf exports a set
Styling of React primitives that enable you
to render things into your
Fonts
document very easily. It also has an
Node API
API for styling them, using CSS
Advanced
properties and Flexbox layout.
Playground / REPL

Donate Let's make the code speak for itself:

import React from 'react';

import { Page, Text, View,

// Create styles

const styles = StyleSheet.c


page: {

flexDirection: 'row',
backgroundColor: '#E4E4
},

section: {

margin: 10,
padding: 10,

flexGrow: 1
}

});

// Create Document Componen


const MyDocument = () => (

<Document>

<Page size="A4" style={


<View style={styles.s
<Text>Section #1</T
</View>

<View style={styles.s
<Text>Section #2</T
v2
</View>

</Page>

Quick start guide </Document>

Rendering process );

Components

SVG Images
This will produce a PDF document
Hooks
with a single page. Inside, two
Styling different blocks, each of them
Fonts rendering a different text. These
Node API are not the only valid primitives
Advanced you can use. Please refer to the
Components or Examples sections
Playground / REPL
for more information.
Donate

3. Choose where to
render the document

React-pdf enables you to render


the document in three 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 '@reac

ReactPDF.render(<MyDocument

Render to a stream

v2 import ReactPDF from '@reac

ReactPDF.renderToStream(<My
Quick start guide

Rendering process

Components Render in DOM


SVG Images

Hooks import React from 'react';

import ReactDOM from 'react


Styling import { PDFViewer } from '
Fonts
const App = () => (

Node API <PDFViewer>

Advanced <MyDocument />

</PDFViewer>

Playground / REPL );

Donate
ReactDOM.render(<App />, do

4. Have fun!

Maybe the most important step —


make use of all react-pdf
capabilities to create beautiful and
awesome documents!

Rendering process →
v2

Quick start guide

Rendering process

Components

SVG Images

Hooks

Styling

Fonts

Node API

Advanced

Playground / REPL

Donate

You might also like