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

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

提问人：varun teja komirishetti 提问时间：10/26/2023 更新时间：10/26/2023 访问量：57

问：

我正在尝试在我的 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

As you can see margin right and bottom are not visible

css reactjs 框边 距 react-pdf

评论

0赞 Maulik Patel 10/26/2023
请分享 codesandbox 的链接，以便我们也可以查看您的 Table 组件并调试问题。
0赞 varun teja komirishetti 10/26/2023
@MaulikPatel codesandbox.io/p/github/varunteja01/reactpdflandscape/main 从未使用过 codesandbox 第一次尝试过，希望链接有所帮助
0赞 Maulik Patel 10/26/2023
我在下面添加了解决方案，请仔细阅读并告诉我 - 如果您有任何问题。
0赞 varun teja komirishetti 10/27/2023
@MaulikPatel非常感谢！它帮助了我
0赞 Maulik Patel 10/28/2023
如果解决了您的问题，则将该答案标记为已接受。

答：

0赞 Maulik Patel 10/26/2023 #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>;

如果您有任何其他问题，请告诉我。

上一个：如何在位图数组列表后面设置投影？

下一个：在编辑时添加和删除单元格边框