You can use Online REPL to paste this code and see the code output

Code

// src/MyDocument.js
import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  },
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  image: {
    width: 50,
    height: 50
  },
  date: {
    fontSize: 12,
    textAlign: 'right'
  },
  table: {
    display: "table",
    width: "auto",
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: '#bfbfbf'
  },
  tableRow: {
    flexDirection: "row"
  },
  tableColHeader: {
    width: "15%",
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: '#bfbfbf',
    backgroundColor: '#f0f0f0'
  },
  tableCol: {
    width: "15%",
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: '#bfbfbf'
  },
  tableCellHeader: {
    margin: 5,
    fontSize: 10,
    fontWeight: "bold"
  },
  tableCell: {
    margin: 5,
    fontSize: 10
  },
  footerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 20
  },
  footerText: {
    fontSize: 12
  },
  totalCost: {
    fontSize: 12,
    fontWeight: 'bold'
  }
});

const data = [
  {
    title: 'Attack on Titan',
    studio: 'Wit Studio',
    genre: 'Action, Dark Fantasy',
    releaseDate: '04-07-2013',
    status: 'Completed',
    rating: '9.0',
    cost: '$120'
  },
  {
    title: 'My Hero Academia',
    studio: 'Bones',
    genre: 'Action, Superhero',
    releaseDate: '04-03-2016',
    status: 'Ongoing',
    rating: '8.5',
    cost: '$100'
  },
  {
    title: 'One Punch Man',
    studio: 'Madhouse',
    genre: 'Action, Comedy',
    releaseDate: '10-05-2015',
    status: 'Completed',
    rating: '8.8',
    cost: '$110'
  },
  {
    title: 'Demon Slayer',
    studio: 'Ufotable',
    genre: 'Action, Supernatural',
    releaseDate: '04-06-2019',
    status: 'Ongoing',
    rating: '8.7',
    cost: '$150'
  },
  {
    title: 'Fullmetal Alchemist: Brotherhood',
    studio: 'Bones',
    genre: 'Adventure, Dark Fantasy',
    releaseDate: '04-05-2009',
    status: 'Completed',
    rating: '9.2',
    cost: '$130'
  }
];

// Create Document Component
const MyDocument = () => {
  const calculateTotalCost = () => {
    return data.reduce((total, item) => total + parseFloat(item.cost.replace('$', '')), 0).toFixed(2);
  };

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <View style={styles.headerContainer}>
            <Image style={styles.image} src="<https://static.vecteezy.com/system/resources/thumbnails/013/993/061/small/mugiwara-the-illustration-vector.jpg>" />
            <Text style={styles.headerText}>Anime Report</Text>
            <Text style={styles.date}>{new Date().toLocaleDateString()}</Text>
          </View>
          <View style={styles.table}>
            <View style={styles.tableRow}>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Title</Text>
              </View>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Studio</Text>
              </View>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Genre</Text>
              </View>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Release Date</Text>
              </View>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Status</Text>
              </View>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Rating</Text>
              </View>
              <View style={styles.tableColHeader}>
                <Text style={styles.tableCellHeader}>Cost</Text>
              </View>
            </View>
            {data.map((item, index) => (
              <View style={styles.tableRow} key={index}>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.title}</Text>
                </View>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.studio}</Text>
                </View>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.genre}</Text>
                </View>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.releaseDate}</Text>
                </View>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.status}</Text>
                </View>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.rating}</Text>
                </View>
                <View style={styles.tableCol}>
                  <Text style={styles.tableCell}>{item.cost}</Text>
                </View>
              </View>
            ))}
          </View>
          <View style={styles.footerContainer}>
            <Image style={styles.image} src="<https://static.vecteezy.com/system/resources/thumbnails/013/993/061/small/mugiwara-the-illustration-vector.jpg>" />
            <Text style={styles.totalCost}>Total Cost: ${calculateTotalCost()}</Text>
          </View>
        </View>
      </Page>
    </Document>
  );
};

export default MyDocument;

Output

<aside> 💡

If you learned something from it, please like and share it with your friends and community. I write blogs and share content on JavaScript, TypeScript, Open Source, and other web development-related topics. Feel free to follow me on my socials. I'll see you in the next one.

</aside>

Thank You :)

• Twitter
• LinkedIn
• GitHub