React PDF项目中@react-pdf/renderer生成PDF时右下边界与边距不显示问题

我在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

问题原因及解决办法 #

核心原因 #

1. Page组件的margin设置逻辑有问题：@react-pdf/renderer中直接给Page设数值型margin，会导致页面可视区域计算偏差，右侧和底部的边距容易被裁切；另外border:1这种简写方式不规范，组件无法正确识别渲染。
2. 内部View的边界超出Page范围：子组件内容可能撑满了Page空间，加上自身border后，右侧和底部的边界被Page的可视区域截断。

具体修复方案 #

方案一：用padding替代Page的margin，统一设置页面边界

把Page的margin换成padding，同时规范border的写法，确保页面四周的留白和边界都能正常显示：

<Page
  orientation="landscape"
  size="A4"
  style={{
    padding: 20, // 用padding确保内部内容不会超出页面范围
    border: '1px solid black', // 完整定义border样式
  }}
>
  <View>
    <Title />
    <Table tableData={tableData} />
    <Footer />
  </View>
</Page>

方案二：给内部View设置margin并限制尺寸

如果需要保留内部View的独立边界，要通过margin控制留白，同时限制View的最大尺寸避免超出Page：

<Page
  orientation="landscape"
  size="A4"
  style={{ margin: 0 }}
>
  <View style={{
    border: '1px solid black',
    margin: 20,
    maxWidth: 'calc(100% - 40px)', // 减去左右margin总和
    maxHeight: 'calc(100% - 40px)', // 减去上下margin总和
  }}>
    <Title />
    <Table tableData={tableData} />
    <Footer />
  </View>
</Page>

方案三：检查子组件尺寸

确认Title、Table、Footer等子组件的宽度不超过父容器，比如给Table设置width: '100%'，避免内容溢出导致底部或右侧被裁切。

内容的提问来源于stack exchange，提问作者varun teja komirishetti