0

我在我当前的项目中使用@react-pdf/renderer 并且我必须在我的发票页面上使用它。我已经使用此网站的帮助创建了带有示例数据的发票概览以创建 pdf 。我想要的是，当我单击按钮时，它将转到另一个页面并使用我提供的示例数据呈现 pdf，但问题是当我第一次单击时它会起作用，但是当第二次单击时，整个浏览器会卡住。

你可以看到我在说什么

在此处输入图像描述

下面是调用页面的代码段

<Button
  className="float-right btn-pill  mr-2 "
  color="primary"
  outline
  onClick={() => {
    this.props.history.push("/InvoiceOverview/InvoicePDF");
  }}
>
  View Invoice
</Button>;

下面是我的pdf显示的地方：

import React, { Component } from "react";
import Invoice from "./Invoice";
import { PDFViewer } from "@react-pdf/renderer";
import invoiceData from "./invoice-data";

class InvoicePDF extends Component {
  componentWillUnmount() {
    console.log("im un mounted pdf invoice");
  }
  componentDidMount() {
    console.log("im  mounted pdf invoice");
  }
  render() {
    return (
      <PDFViewer width="1000" height="600">
        <Invoice invoice={invoiceData} />
      </PDFViewer>
    );
  }
}

export default InvoicePDF;

下面是我正在创建 pdf 示例数据：

import React from "react";
import {
  Page,
  Document,
  Image,
  StyleSheet,
  Text,
  View
} from "@react-pdf/renderer";
import InvoiceTitle from "./InvoiceTitle";
import InvoiceOwnerCompany from "./InvoiceCompany";
import InvoiceTxBnk from "./invoiceTxBnk";
import TableOne from "./TableOne";
import BillTo from "./BillTo";
import InvoiceBottom from "./InvoiceBottom";
import logo from "./bar_logo_respoonsive.png";

const styles = StyleSheet.create({
  page: {
    fontFamily: "Helvetica",
    fontSize: 11,
    paddingTop: 30,
    paddingLeft: 60,
    paddingRight: 60,
    paddingBottom: 30,
    lineHeight: 1.5,
    flexDirection: "column"
  },
  logo: {
    marginLeft: "auto",
    marginRight: "auto"
  },
  row: {
    flexDirection: "row"
  },
  col: {
    flexDirection: "column"
  }
});

const Invoice = ({ invoice }) => (
  <Document>
    <Page size="A4" wrap style={styles.page}>
      <View style={[styles.row]} fixed>
        <View style={[styles.col, { flexBasis: "30%" }]}>
          <Image style={styles.logo} src={logo} />
        </View>
        <View style={[styles.col, { flexBasis: "70%" }]}>
          <InvoiceOwnerCompany
            company="Ciao Pvt Ltd"
            address1="36/1 Poorwarama Road"
            address2="Nugegoda, SRI LANKA"
            phone="0769821619"
          />
        </View>
      </View>
      <View style={[{ flexDirection: "row" }]} fixed>
        <View style={[styles.col, { flexBasis: "40%", marginTop: "5px" }]}>
          <Text style={{ fontSize: "10" }}>*Special Note:DILUSHA-CMB</Text>
        </View>
        <View style={[styles.col, { flexBasis: "60%", marginTop: "5px" }]}>
          <InvoiceTxBnk
            TAXNO="174088918-90"
            BankDetails=" Commercial Bank PLC"
            AccountNo="1200059710"
          />
        </View>
      </View>
      <View fixed>
        <InvoiceTitle title="Invoice" />
      </View>

      <View style={[styles.row, { marginTop: "1px" }]} fixed>
        <View
          style={[styles.col, { flexBasis: "100%", border: "1pt solid #000" }]}
        >
          <TableOne
            invoiceNo="20200106223"
            startdate="03/01/2020"
            dueDate="03/01/2020"
            EndCompany="Shangri-La Hotels Lanka (pvt) Ltd"
            EndContact="0766665236"
            EndAddress="No.5 bethesda Place,Off Dickmans Road, Colombo 5"
            VAT="114756601-7000"
          />
        </View>
      </View>
      <View style={{ marginTop: "5px" }} fixed>
        <InvoiceTitle title="Details" />
      </View>
      <View>
        <BillTo invoice={invoice} />
      </View>

      <View style={{ marginTop: "5px" }}>
        <InvoiceBottom />
      </View>
    </Page>
  </Document>
);

export default Invoice;

下面是我正在使用的示例数据：

const invoiceData = {
  id: "5df3180a09ea16dc4b95f910",
  invoice_no: "201906-28",
  balance: "$2,283.74",
  company: "MANTRIX",
  email: "susanafuentes@mantrix.com",
  phone: "+1 (872) 588-3809",
  address: "922 Campus Road, Drytown, Wisconsin, 1986",
  trans_date: "2019-09-12",
  due_date: "2019-10-12",
  items: [
    {
      sno: 1,
      desc: "ad sunt culpa occaecat qui",
      qty: 5,
      rate: 405.89
    },
    {
      sno: 2,
      desc: "cillum quis sunt qui aute",
      qty: 5,
      rate: 373.11
    },
    {
      sno: 3,
      desc: "ea commodo labore culpa irure",
      qty: 5,
      rate: 458.61
    },
    {
      sno: 4,
      desc: "nisi consequat et adipisicing dolor",
      qty: 10,
      rate: 725.24
    },
    {
      sno: 5,
      desc: "proident cillum anim elit esse",
      qty: 4,
      rate: 141.02
    },
    {
      sno: 1,
      desc: "ad sunt culpa occaecat qui",
      qty: 5,
      rate: 405.89
    },
    {
      sno: 2,
      desc: "cillum quis sunt qui aute",
      qty: 5,
      rate: 373.11
    },
    {
      sno: 3,
      desc: "ea commodo labore culpa irure",
      qty: 5,
      rate: 458.61
    },
    {
      sno: 4,
      desc: "nisi consequat et adipisicing dolor",
      qty: 10,
      rate: 725.24
    },
    {
      sno: 5,
      desc: "proident cillum anim elit esse",
      qty: 4,
      rate: 141.02
    },
    {
      sno: 1,
      desc: "ad sunt culpa occaecat qui",
      qty: 5,
      rate: 405.89
    },
    {
      sno: 2,
      desc: "cillum quis sunt qui aute",
      qty: 5,
      rate: 373.11
    },
    {
      sno: 3,
      desc: "ea commodo labore culpa irure",
      qty: 5,
      rate: 458.61
    },
    {
      sno: 4,
      desc: "nisi consequat et adipisicing dolor",
      qty: 10,
      rate: 725.24
    },
    {
      sno: 5,
      desc: "proident cillum anim elit esse",
      qty: 4,
      rate: 141.02
    }
  ]
};

export default invoiceData;
4

0 回答 0