I'm using @react-pdf/renderer in my current project & I have to use it on my invoice page. I have created an overview of the invoice with sample data to create the pdf using the help of this website. what I want is when I'm clicking the button it will go to another page & render the pdf with sample data I provided, but the problem is when I click 1st time it will work but when click in second time whole browser will stuck.
you can see what I'm talking by seen this
below is the code segment of calling the page
<Button
className="float-right btn-pill mr-2 "
color="primary"
outline
onClick={() => {
this.props.history.push("/InvoiceOverview/InvoicePDF");
}}
>
View Invoice
</Button>;
below is where my pdf is showing :
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;
below is I'm creating the pdf the sample data:
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;
below is the sample data I'm using :
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;