I am encountering an issue in my React PDF project where I am unable to visualize the bottom and right margins as well as the borders of my reactPDF

Question

I'm trying to generate a PDF using the @react-pdf/renderer library in my React application. Everything seems to be working fine except for one issue: the right and bottom margins are not visible in the generated PDF. However, the top and left margins are clearly visible.

here's my code

import React from 'react'
import Title from './components/Title'
import { PDFViewer, Page, Document, View } from '@react-pdf/renderer'
import Table from './components/Table'
import Footer from './components/Footer'

const App = () => {
  const tableData = [

    { sno: 2, hsn: 67890, mfg: 'XYZ Corp.' },
    { sno: 2, hsn: 67890, mfg: 'XYZ Corp.' },
  ]
  return (
    <PDFViewer style={{ width: '100%', height: '100vh' }}>
      <Document>
        <Page
          orientation="landscape"
          size="A4"
          style={{
            border: 1,
            margin: 20,
          }}
        >
          <View style={{ border: '1px solid black' }}>
            <Title />
            <Table tableData={tableData} />
            <Footer />
          </View>
        </Page>
      </Document>
    </PDFViewer>
  )
}

export default App

Answer 1

I have applied margin on all the sides this way:

Note: I am not able to paste link because your link was private, I have pasted part of the code which you need to change as below.

Step1: You need to add styles this way:

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

Step2: Apply styles in the View

<Page orientation="landscape" size="A4" style={styles.page}>
  <View style={styles.section}>
    <Title />
    <Table tableData={tableData} />
    <Footer />
  </View>
</Page>;

Let me know, if you've any further questions.