I am currently working on creating a PDF using the @react-pdf/renderer library within my React project. Everything seems to be functioning correctly except for an issue with the right and bottom margins not appearing in the PDF. Strangely, the top and left margins are visible without any problems.
Below is the code snippet I am using:
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