@ response-pdf / renderer не будет отображаться во второй раз

Question

Я использую @ response-pdf / renderer в моем текущем проекте, и я должен использовать его на своей странице счета. Я создал обзор счета-фактуры с образцами данных для создания PDF-файла с помощью этого веб-сайта . то, что я хочу, это когда я нажимаю кнопку, она go переходит на другую страницу и отображает pdf с предоставленными мне образцами данных, но проблема в том, что когда я нажимаю 1-й раз, он будет работать, но при втором щелчке браузер будет застрял.

вы можете видеть то, что я говорю, увидев это

ниже приведен фрагмент кода вызова страницы

<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;