Rank 2
Iron
Iron
Iron
constexportPDFss= () => {
<PDFExport
paperSize="A4"
forcePageBreak=".page-break"
pageTemplate={PageTemplate}
margin={{
top: "6.5cm",
left: "1cm",
right: "1cm",
bottom: "3.5cm",
}}
ref={(pdfExport) => (gridPDFExport = pdfExport)}
>
I am using this type of code, but I have some conditions that can be applied. I am clicking the save print button. The PDF background colour is red. After saving is completed, it can be set to a green colour. How to fix these issue beacuse I am prrint a PDf is always set a Green color in print time
1 Answer, 1 is accepted
Hello Tejas,
During PDF export, "k-pdf-export" class is added to the wrapping element and you can use it for applying styles only during the PDF export. More information on this matter can be found in the following help article:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 2
Iron
Iron
Iron
Hi Tejas,
I am not sure that I understand the exact scenario that you have. If you can't use the "k-pdf-export" class name for the customization of the styles, you can manually change the content before triggering the export.
Nevertheless, if further assistance is needed, please share a stackblitz example with the scenario that you have and provide more information about the exact result that you want to achieve, so we can give some relevant to your scenario suggestion.
Looking forward to your reply.
Rank 2
Iron
Iron
Iron
Hi, Konstantin Dikov Thanks for answering my question. I am sharing a stackblitz example with the scenario: https://stackblitz.com/edit/react-qa6jwu?file=src%2FApp.js.
I am using these types for a specific purpose. After saving a pdf, changing some colour, font, box, etc., and the file being completed, I see a normal look before the pdf, but it is not working correctly. It always prints a false value.
const [cssCondition, setCssCondition] = useState(false);
const handleExportWithComponent = (event) => {
setCssCondition(true);
pdfExportComponent.current.save();
};
Hi Tejas,
I have tested the example and the exported file was with the "red" background color, which is the expected behavior. However, testing the same example multiple times resulted in different results and in some of the exports the background was black.
In order to resolve the inconsistency you can wrap the call of the "save" method in setTimeout function, so that the change in the state can be applied before the export:
const handleExportWithComponent = (event) => {
setCssCondition(true);
setTimeout(() => {
pdfExportComponent.current.save();
setCssCondition(false);
});
};Here is the updated example:
Please let me know if the suggestion resolves the issue on your side too.
Rank 2
Iron
Iron
Iron
Hi, Konstantin Dikov
It works, but I'm using a header and footer in an image for an A4-sized page. But the issue is that header and footer images are received through the API, and these images are dynamically changed. but the problem is that I am using a page template for Kendo. but the image is overlapped in the customer name data section. Any idea how to fix these issues? I have set a fixed size for any image set for the header and footer sizes. I am trying to set a width of 100 and a height of auto for CSS props, but I have not set a prop in the header for the page.
Hi Tejas,
Please share an example demonstrating the exact issue that you are facing, so we can try to debug it locally.