I have 2 questions concerning the PDF export functionality:
1. Is it possible to somehow display a component only in the PDF but not in the browser?
I tried set the "isExporting" in the click handler that triggers PDF generation, but
the resulting PDF does not include the expected <h1> tag.
const [ isExporting, setIsExporting ] = useState(false);
const exportPdf = () => {
setIsExporting(true);
pdfExportRef.current.save(() => {
setIsExporting(false);
});
}
<PDFExport ...>
{isExporting && <h1>My title</h1>}
<table>..</table>
<Chart>..</Chart>
</PDFExport>
2. Is it possible add extra content into the PDF in case I generate a grid using the GridPDFExport component?
I am able to generate the file OK and the PDF output is as expected. However, I would like to add an extra title (<h1>) and paragraph (<p>) before the grid output (in the PDF). I am using GridPDFExport as I want generate all pages of a grid and remove filters, paging etc.
My code is based on this example: https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/all-pages/
{grid}
<GridPDFExport ref={jobsPdfExportRef}
margin="1cm">
<h1>My title</h1>
<p>my description my descriptionmy descriptionmy descriptionmy descriptionmy description</p>
{grid}
</GridPDFExport>
Thank you
1 Answer, 1 is accepted
Hello, Jan,
Regarding both questions:
1) Is it possible to somehow display a component only in the PDF but not in the browser?
Yes, this is possible. The approach is very similar, but the main point is that the export has to be done with the `isExporting` is updated and the component is actually re-rendered. In the current state, we are exporting it before the update has finished.
This can be done using React.useEffect by setting isExporting in the dependency array, and exporting the PDF when the value is true. Something like this:
React.useEffect(()=>{
if(isExporting){
pdfExportRef.current.save(() => {
setIsExporting(false);
})
}
}, [isExporting])Yes, but this will require using the template property, as the GridPDFExport has an internal logic that ignores all other elements that are not a Grid:
https://www.telerik.com/kendo-react-ui/components/pdfprocessing/api/GridPDFExportProps/#toc-pagetemplate
This forum thread has an example on how to use the property:
https://www.telerik.com/forums/pdfexport-pagetemplate
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1