我在 React PDF 项目中遇到一个问题，我无法可视化 ReactPDF 的底部和右边距以及边框

Question

我正在尝试在我的 React 应用程序中使用 @react-pdf/renderer 库生成 PDF。一切似乎都工作正常，除了一个问题：右侧和底部边距在生成的 PDF 中不可见。然而，顶部和左边距清晰可见。

这是我的代码

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

我已经这样在所有边应用了边距：

注意：我无法粘贴链接，因为您的链接是私人的，我已经粘贴了您需要更改的部分代码，如下所示。

Step1：您需要这样添加样式：

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

Step2：在视图中应用样式

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

如果您还有任何疑问，请告诉我。