Scribd
Upload
14 views

React-pdf-344334

Uploaded by

shravan.tctk0533
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

React-pdf-344334

Uploaded by

shravan.tctk0533
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

React-pdf https://react-pdf.

org/

Edit

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

Try it out!

1. Install React and react-pdf

Starting with react-pdf is extremely simple.

Using npm

npm install @react-pdf/renderer --save

Using Yarn

1 of 5 20/12/24, 4:18 pm
React-pdf https://react-pdf.org/

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/rend

2 of 5 20/12/24, 4:18 pm
React-pdf https://react-pdf.org/

// 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

3 of 5 20/12/24, 4:18 pm
React-pdf https://react-pdf.org/

React-pdf enables you to render the document in two different


environments: web and ser ver. 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

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

ReactPDF.renderToStream(<MyDocument />);

Render in DOM

import React from 'react';


import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (


<PDFViewer>
<MyDocument />
</PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root')

4 of 5 20/12/24, 4:18 pm
React-pdf https://react-pdf.org/

4. Have fun!

Maybe the most important step — make use of all react-pdf


capabilities to create beautiful and awesome documents!

Compatibility →

5 of 5 20/12/24, 4:18 pm

You might also like