In this article, we will see how to create a pdf file in react js. Here, we will learn about generating pdf files in react js application. For this example, we will use the react-pdf package. This package is used to create PDFs using React. It can create PDF files on the browser and server. Also, the react-pdf package is pure javascript.

Learn more about react-pdf.

So, let's see how to generate pdf files in react js, react js generate pdf file from HTML, react-pdf/renderer example, how to convert pdf from HTML 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.

Using yarn

yarn add @react-pdf/renderer

Using npm

npm install @react-pdf/renderer --save

 

Now, 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 - Techsolutionstuff</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'));

Also, you see an example in codesandbox.io.

 

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 - Techsolutionstuff</Text>
      </View>
    </Page>
  </Document>
);

ReactPDF.render(doc);

 

The <Circle /> element is used to create a circle. 

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>
);

 

---

You might also like:

• Read Also: How To Generate PDF File In Node JS Using PDFKit
• Read Also: How To Generate PDF From HTML Using Javascript
• Read Also: How To Generate PDF Using DomPDF In Laravel 9
• Read Also: How To Convert HTML To PDF In Python