Generate PDF Using React Js

1. First, you need to create the React js app.

npx create-react-app pdfgenerate

2. You need to install a dependency.

npm install @react-pdf/renderer --save

3. Create a folder pdf and inside the folder create the file BasicPdf.js

4. Inside the Basic pdf write the below code.

import {
  Document,
  Page,
  Text,
  View,
  StyleSheet,
  PDFViewer,
} from "@react-pdf/renderer";
// Create styles
const styles = StyleSheet.create({
  page: {
    color: "black",
  },
  section: {
    margin: 10,
    padding: 10,
  },
  viewer: {
    width: window.innerWidth,
    height: window.innerHeight,
  },
  header:{
    flexDirection: "row",
    justifyContent: "center",
    margin: 20,
    padding: 10,
    backgroundColor: "gray"
  }
});

function BasicPdf(props) {
  return (
    <PDFViewer style={styles.viewer}>
      {/* Start of the document*/}
      <Document>
        {/*render a single page*/}
        <Page size="A4" style={styles.page}>
          <View style={styles.header}>
            <Text>Eleven Coder Bill</Text>
          </View>
          <View style={styles.section}>
            <Text>{props.name}</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
}

export default BasicPdf;

5. Open the App.js File.

import './App.css';
import BasicPdf from './pdf/BasicPdf';

function App() {
  return (
    <div className="App">
      <BasicPdf name="Ravinder"/>
    </div>
  );
}

export default App;

6. Run your project.

npm start

7. Open the project in the browser.

http://localhost:3000/

Thanks…