Hello,
I have come across a small problem when trying to create PDF's out of Forms in SharePoint Online.
I have this Forms which you can see below :
Now everything works fine when exporting it to PDF when clicking on this Button "Download PDF" and the code for this also works fine.
Now my Problem is the size of the content which is proportionaly way to big for a normal A4 Size PDF.
Is there a way to scale the content to make it smaller ?
Dear @Dario_Chiga,
Everything on the form can be adjusted with CSS, for example:
.k-pdf-export {
font-family: "DejaVu Sans", "Arial", sans-serif !important;
font-size: 12px;
}
You can also use it to reduce padding/margins on the form. Let me know if you struggle with some specific elements/fields, I'll help you with them specifically.
Hi Nikita
Thank you for your answer but that doesnt change anything on the form. The Font stays the same and the size doesn't change as well.
Dear @Dario_Chiga,
This is just a basic example, some more adjustments might be necessary. Here's a more working sample, but it will still only help with some fields/controls, others will need more CSS:
.k-pdf-export .fd-form,
.k-pdf-export .fd-form .form-control {
font-size: 12px !important;
}
.k-pdf-export .fd-form .row>.fd-field-title{
width: 60px !important;
}
.k-pdf-export .k-widget.form-control .k-input{
padding: 3px !important;
}Hi Nikita
Unfortunately this doens't work either.
Is there a List somewhere where i can check all the different variables that can be used like these:
.k-pdf-export .fd-form,
.k-pdf-export .fd-form .form-control
.k-pdf-export .fd-form .row>.fd-field-title
.k-pdf-export .k-widget.form-control .k-input
Dear @Dario_Chiga,
All of this can be adjusted and experimented with in the browser, using the Inspect functionality, where you can adjust style for any of the elements on the form:
You can also not use .k-pdf-export class while adjusting the CSS, this way you'll see the changes on the form even when not exporting to PDF.
ah perfect. thank you very much that's exactly what i needed.
so now i ran into another problem
while the first one works with adjusting the font-size in the form, the second one does not for the PDF.
On the A4 format it is still way to big.
Dear @Dario_Chiga,
Do the styles actually apply on export to PDF? If they do, try smaller font. Also, try exporting form without .k-pdf-export class, but with adjusted styles, see if the styles apply this way or not.
Even when trying to export the PDF without .k-pdf-export it doesnt apply.
Could it be that maybe it doesnt apply because it's from the Form Panel?
Dear @Dario_Chiga,
But do you see the changes on the form itself without .k-pdf-export? Maybe you can try some smaller sizes, maybe the change is simply not big enough to notice on PDF?
Yes i see the changes on the Form itself and the size would be seen on PDF as well if it would change.
But i noticed that in every case however i change the form. the PDF still stays the same.
Maybe some more Information for you that could help:
The PDF gets exported through a button i inserted on the Form itself and this is the code on the button
So i dont use the Button which is there by default on the right side on the image below:
Dear @Dario_Chiga,
That still should work. Can you try exporting to PDF via original button? Also, try to export without specifying a template, maybe this affects the styles as well.
