I am using PDFExport from "@progress/kendo-react-pdf". On click of download button(present on the right side) I need to download the UI in pdf.
But the text ‘285A Crown Street- 2022 Aug’ (text from the component contentInPdf()
)shouldn’t be rendered on UI but should be present in the pdf downloaded.
Below is the code I have-
return (
<PDFExport
ref={pdfExportComponent}
paperSize="auto"
margin={40}
fileName={`Stack plan for asset [${assetName}] ${ monthSelected!=null?"-"+moment(monthSelected).format('YYYY MMM'):""}`}
author="LaSalle Genie Team"
>
<div className="grid grid-cols-12 md:gap-2 xl:gap-4 mb-2 ">
<div className="md:col-span-4 sm:col-span-12 mt-4 xl:mt-6 ">
<div className="flex justify-start">
{contentInPdf()}
<div>
<MonthPicker
format={"MMM yyyy"}
value={monthSelected}
onDateChange={onDateChange}
placeholder="Select Date"
className={"no-export"}
/>
</div>
</div>
</div>
{!noData && <div className="md:col-span-8 sm:col-span-12 flex justify-end mt-4 xl:mt-6">
{legends.map((item, index) => {
return (
<div className="mr-3 last:mr-0 flex" key={index}>
<div
className={"box-border h-5 w-5 border-1 " + item.bgColor}
></div>
<div className="ml-1">{item.text}</div>
</div>
);
})}
<Tooltip anchorElement="target" position="top">
<div className="my-auto ml-5 no-export" onClick={exportPDFWithComponent}>
<DownloadIcon title="Download PDF" className="cursor-pointer" />
</div>
</Tooltip>
<span className="k-icon k-i-more-vertical"></span>
</div>}
</div>
</PDFExport>
)
Below is the component which must be included in pdf but not on UI
const contentInPdf = ()=>{
return <div>
{assetName} { monthSelected!=null?"-"+moment(monthSelected).format('YYYY MMM'):""}
</div>
}
Below is the onClick function for download-
const exportPDFWithComponent = () => {
if (pdfExportComponent.current) {
pdfExportComponent.current.save();
}
};
2
Answers
Ok here is the solution- Use class .k-pdf-export to modify pdf styles
In css file (I'm using next.js hence modified global.scss)-
I have faced the same issue in one of my projects. I handled the situation by rendering that item but adding too much padding so you can’t see it in the view.