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>標簽來感謝您的惠顧！ 在文件末尾。