Hi Developers,
Lets see How To Create PDF File In React JS.
In this step, we will install the react-pdf package using the following command. You can two ways to install this package.
npm install @react-pdf/renderer --saveNow, we will create a PDF file document and import react-pdf in the index.js file.
import React from 'react';
import {
Page, Text, View, Document, StyleSheet
} from '@react-pdf/renderer';
import ReactDOM from 'react-dom';
// 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>How To Create PDF File In React JS - ITSolutionsGuides</Text>
</View>
</Page>
</Document>
);
ReactDOM.render(<MyDocument />, document.getElementById('root'));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 '@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'));You can add an inline style as a given example.
const doc = (
<Document>
<Page size="A4" style={{ backgroundColor: '#bbb' }}>
<View style={{ color: '#111', textAlign: 'center', margin: 30, fontSize:22 }}>
<Text>How To Create PDF File In React JS - ITSolutionsGuides</Text>
</View>
</Page>
</Document>
);
ReactPDF.render(doc);The
const styles = StyleSheet.create({
page: { padding: 60 },
});
const doc = (
<Document>
<Page style={styles.page} size="A4">
<Svg viewBox="0 0 100 100">
<Circle
cx="50"
cy="50"
r="40"
fill="tomato"
stroke="gray"
/>
</Svg>
</Page>
</Document>
);
ReactPDF.render(doc);Page breaks are useful for separating concerns inside the document. Adding page breaks in react-pdf is very simple: all you have to do is add the break prop to any primitive.
import { Document, Page, Text } from '@react-pdf/renderer'
const doc = () => (
<Document>
<Page wrap>
<Text break>
// fancy things here
</Text>
</Page>
</Document>
);We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides