react-pdf/renderer - 无法读取未定义的属性（读取“高度”）答案

【问题标题】：react-pdf/renderer - Cannot read properties of undefined (reading 'height')react-pdf/renderer - 无法读取未定义的属性（读取“高度”）
【发布时间】：2021-11-15 23:20:44
【问题描述】：

编辑：我已经使用 jsPDF 而不是 react-pdf/renderer 实现了我需要的东西，所以下面的猜测不再重要了！会留下来，以防将来有答案对某人有帮助。

我已经尝试解决所有我能想到的问题，需要一些帮助！

我正在尝试使用 react-pdf/renderer 渲染动态 PDF，但我不断收到错误消息“无法在控制台中读取未定义的属性（读取：'高度'）并且 PDF 不会显示在网页上。

所以最初我使用了<p> 元素，并且通过搜索这是不行的，所以我将所有这些都换成了<Text>，但错误仍然存在。我之前也尝试过使用顺风进行样式设置，但我也经历过并删除了所有这些以使用文档中的样式。

我现在很茫然，看不到其他我不应该做的事情。为了以防万一，我也尝试注释掉映射和矩函数，这没有任何区别。

代码如下，第一个 sn-p 是我要渲染的地方，然后第二个 sn-p 是完整的组件。它最初不在“仪表板”中，这就是发票是空数组的原因，只是将其移到此处作为我的故障排除的一部分（也没有帮助）。

任何指导将不胜感激！

import React from "react";
import { useSelector } from "react-redux";
import { EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
import InvoicePage from "../../pdf/InvoicePage";
import { PDFViewer } from "@react-pdf/renderer";

function DashboardScreen() {
  const auth = useSelector((state) => state.auth);
  const user = auth.user;

  const viewInvoice = [""];

  return (
    <div className='flex flex-col mx-auto'>
      <EuiFlexGroup
        direction='column'
        justifyContent='center'
        alignItems='center'
        className='w-full'
      >
        <EuiFlexItem>
          <h2 className='text-5xl mt-10'>{user.firstName}'s Dashboard</h2>
        </EuiFlexItem>
        <EuiFlexItem className='mt-20 text-lg'>
          Dashboard Coming Soon!
        </EuiFlexItem>
      </EuiFlexGroup>
      <PDFViewer>
        <InvoicePage user={user} invoice={viewInvoice} />
      </PDFViewer>
    </div>
  );
}

export default DashboardScreen;

import { Page, Document, View, Text, StyleSheet } from "@react-pdf/renderer";
import React from "react";
import moment from "moment";

function InvoicePage({ invoice, user }) {
  const styles = StyleSheet.create({
    page: {
      backgroundColor: "white",
    },
  });
  return (
    <Document>
      <Page size='A4' style={styles.page}>
        <View style={{ display: "flex" }}>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              width: "50%",
              border: "solid 1px gray",
              padding: 8,
            }}
          >
            <Text>Invoice To:</Text>
            <Text>{invoice.clientName}</Text>
            <Text>{invoice.clientAddrOne}</Text>
            <Text>{invoice.clientCity}</Text>
            <Text>{invoice.clientPostcode}</Text>
          </View>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              width: "50%",
              marginLeft: 80,
              border: "solid 1px gray",
              padding: 8,
            }}
          >
            <Text>Invoice From:</Text>
            <Text>
              {user.firstName} {user.secondName}
            </Text>
            <Text>{user.addrOne || ""}</Text>
            <Text>{user.city || ""}</Text>
            <Text>{user.postcode || ""}</Text>
          </View>
        </View>
        <View
          style={{
            display: "flex",
            flexDirection: "column",
            marginTop: 32,
            border: "1px solid gray",
            padding: 8,
          }}
        >
          <View style={{ display: "flex", width: "100%" }}>
            <Text style={{ width: "35%", textDecoration: "underline" }}>
              Invoice Number
            </Text>
            <Text style={{ width: "35%", textDecoration: "underline" }}>
              Date Sent
            </Text>
            <Text style={{ width: "35%", textDecoration: "underline" }}>
              Date Due
            </Text>
          </View>
          <View style={{ display: "flex", width: "100%", marginTop: 8 }}>
            <Text style={{ width: "35%", paddingLeft: 48 }}>
              {invoice.invoiceNumber}
            </Text>
            <Text style={{ width: "35%" }}>
              {moment(invoice.sentDate).format("Do MMMM YYYY")}
            </Text>
            <Text style={{ width: "35%" }}>
              {moment(invoice.dueDate).format("Do MMMM YYYY")}
            </Text>
          </View>
        </View>
        <View
          style={{
            display: "flex",
            flexDirection: "column",
            border: "1px solid gray",
            marginTop: 8,
            marginBottom: 8,
            padding: 8,
          }}
        >
          <View style={{ display: "flex", width: "100%", marginBottom: 8 }}>
            <Text style={{ width: "50%", textDecoration: "underline" }}>
              Task Description
            </Text>
            <Text style={{ width: "17%", textDecoration: "underline" }}>
              Hours
            </Text>
            <Text style={{ width: "17%", textDecoration: "underline" }}>
              Rate
            </Text>
            <Text style={{ width: "17%", textDecoration: "underline" }}>
              Price
            </Text>
          </View>
          {invoice.tasks.map((task) => {
            const time = task.hours + task.minutes / 60;
            const price = time * invoice.hourlyRate;
            return (
              <View style={{ display: "flex", width: "100%" }}>
                <Text style={{ width: "50%" }}>{task.taskDescription}</Text>
                <Text style={{ width: "17%" }}>{time.toFixed(2)}</Text>
                <Text style={{ width: "17%" }}>{invoice.hourlyRate}</Text>
                <Text style={{ width: "17%" }}>£{price.toFixed(2)}</Text>
              </View>
            );
          })}
        </View>
        <View style={{ display: "flex", justifyContent: "space-between" }}>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              border: "1px solid gray",
              padding: 8,
              width: "40%",
            }}
          >
            <View style={{ display: "flex" }}>
              <View style={{ textDecoration: "underline", marginBottom: 8 }}>
                <Text>Payment Details</Text>
              </View>
            </View>
            <View>
              <View>
                <Text>Payment Method:</Text>
              </View>
              <View>
                <Text>{invoice.paymentMethod}</Text>
              </View>
            </View>
            <View
              style={{ display: "flex", flexDirection: "column", marginTop: 8 }}
            >
              <View>
                <Text>Account Number:</Text>
              </View>
              <View>
                <Text>{invoice.accountNumber}</Text>
              </View>
            </View>
            <View
              style={{ display: "flex", flexDirection: "column", marginTop: 8 }}
            >
              <View>
                <Text>Sort Code:</Text>
              </View>
              <View>
                <Text>{invoice.sortCode}</Text>
              </View>
            </View>
          </View>
          <View
            style={{ display: "flex", flexDirection: "column", width: "50%" }}
          >
            <View
              style={{ display: "flex", border: "1px solid gray", padding: 8 }}
            >
              <View style={{ width: "50%" }}>
                <Text>Total:</Text>
              </View>
              <View style={{ width: "50%" }}>
                <Text>£0.00</Text>
              </View>
            </View>
            <View
              style={{ display: "flex", flexDirection: "column", marginTop: 8 }}
            >
              Thank you for your business!
            </View>
          </View>
        </View>
      </Page>
    </Document>
  );
}

export default InvoicePage;

【问题讨论】：

标签： javascript reactjs pdf

【解决方案1】：

只是一个简单的解决方案，我认为适用于您的情况。您必须提及 <PDFViewer> 元素的高度，例如

<PDFViewer style={{ height: "50vh", width: "100%"}}>
    <InvoicePage user={user} invoice={viewInvoice} />
</PDFViewer>

或

<PDFViewer style={styles.PDFContainer}>
    <InvoicePage user={user} invoice={viewInvoice} />
</PDFViewer>

const styles = StyleSheet.create({
    PDFContainer: {
        width: "100%",
        height: "50vh", //As per your page layout 
    }
}

【讨论】：