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

Question

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

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

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

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

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

代码在下面，第一个片段是我要渲染的地方，第二个片段是完整的组件。 它最初不在“仪表板”中，这就是发票为空数组的原因，只是将其作为我的故障排除的一部分移至此处（也无济于事）。

任何指导将不胜感激！

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;

Answer 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 
    }
}

Answer 2

我知道这个问题很老了，但无论如何......

Thank you for your business!看来您需要添加<Text>标签来感谢您的惠顾！ 在文件末尾。