I have an issue that the dynamic HTML content is overwriting on the header and footer. dynamic content is coming from the response of API and I have shown in the component but while printing this PDF the dynamic content is overlapped on the header and footer. I have used a react-to-print library and the content is dynamic and it has multiple pages. suggest me a strong solution for this. I want the Header and footer along with content but the content shouldn't overlap on the header and footer and the remaining content should go to the next page.
I have rendered data from the response of API through renderHTML() function.
RenderHTML=()=>{
const htmlPart= this.state.carfaxHTML
return(
<div className="rendercarfexHtmlData" dangerouslySetInnerHTML={ {__html: htmlPart} } />
)
}
<div className="row page-break-top"> <div className="col-sm-12">
<Card>
<CardBody className="p-0">
<div className="newFormatReport">
<ReportHeaderIraq />
<div className="container text-main-heading mt-0 p-0" id="carfax_html">
<div className="row mt-0">
<div className="col-sm-12">
{this.RenderHTML()}
</div>
</div>
</div>
<ReportFooterIraq />
</div>
</CardBody>
</Card>
</div>
</div>
this is the rendering part where the function is called.
<ReactToPrint
trigger={() => {
return (
<button className="glass btn btn-lg btn-danger pull-right">
<i className="fa fa-print" />
{this.lang("Print PDF")}
</button>
);
}}
content={() => this.componentRef}
/>
From here React-to-print is triggered.
