Hi,
My users need to save the Forms as PDF and also might print it. There are issues like words overlapping, list or library did not display all columns, pages when using wizard or tab need to save separately instead of once only as next page and button is display in save/print mode.
Do you have any workaround for this?
I have fix the overlapping issues by re-paste the wording again 
I also found the code shared before to save as 1 PDF file for all wizards or tab control... so now pending on display all related list or library instead of chopping to certain length only... hoping someone can help me.
Maybe if the list can be set as wrap and fit it to current form width should be good also.
Currently I just remove the wording only, make it less word for the column
Thank you.
Hello @noorshahida88,
You can set the parent grid wight to 12, so the control will fit the page.
Note that if there are too many columns, the content might be squeezed.
You can change the PDF canvas orientation and size with the following code:
fd.pdfOptions = {
paperSize: 'A4',
landscape: false
};Yes, all my parent form I set the width as 12 already, even the list or library controls also max to 12 width.
For too many columns, noted the content will not display properly. But is there any ways I can print all the contents? Or my users need to open the list separately and print as a list view manually?
Currently the PDF will copy the attachments name with link, possible to auto save it as next pages during the export PDF?
You can change the styling of List or Library control, font size, columns wight, etc. to display all content in PDF file.
Unfortunately, there is no way to add attachment content to the PDF file. In PDF it will be displayed only as a link.
Also, you can try to create PDF file from HTML template with the help of Plumsail Documents. It is more suitable for creating complex PDF files.
@media print
{
.ms-CommandBar, .ms-Nav, .ms-compositeHeader, div[class^="searchBox_"], .removeFocusOutline, .commandBarWrapper {
display:none !important;
}
}
.k-pdf-export .wizard-tab-container {
display: block !important;
}
.k-pdf-export .wizard-nav, .k-pdf-export .wizard-progress-bar, .k-pdf-export .wizard-header, .k-pdf-export .wizard-card-footer {
display: none !important;
}
Above is the CSS for my display form which now form able to export to 1 PDF nicely even though have multiple wizard section. Now the issue is when printing, the preview doesn't fit to A4 with few pages. I need to manually set it as custom printing and adjust the size.
How can I make it by default printing according to how many wizards section that I have?
OR
How can I put page separator in between so that during export it will not save as 1 PDF but one PDF with multiple pages according to how many wizard section I created?
plumsail-form-2019125-173334 (1).pdf (356.6 KB) plumsail-form-2019125-173158 (1).pdf (365.4 KB)
Attached is the export result for page 1 and page 2 of the form wizard. I need the display form able to save as 1 PDF with 2 pages. How to achieve this?
You can specify where you want the page break by adding the HTML control with the following code:
<div class='breaker'></div>
And JS pdfOptions will be the following:
fd.pdfOptions = {
forcePageBreak: ".breaker",
paperSize: 'A4',
landscape: true
};@mnikitina, I have tried this code before...
but from 2 pages that I want it to be, it breaks to 6 pages and certain particulars cut out!
If I remove papersize, it will save to 2 pages nicely but in very tiny page... not able to print it nicely. removing landscape also not solve the issue.
Below screenshot is my Form designer where I only use default width of 12, nothing specific code for form size.
Please check the CSS that is used when exporting to PDF.
You can try to specify the desired width of the parent grid when exporting to PDF. Assign a CSS class to it and use the following code in CSS Editor.
.k-pdf-export .parent-grid {
width: 600px !important;
}
After follow your step, it able to view into nice view for first page but after the page break, there is no more width as per setting. And when preview for print, second page is totally too small, impossible to see if proceed for printing.
First page:
Second page:
Do you have HTML control in the form to break the page in this place, or is it done automatically?
Does the page break the contents of the wizard container? You can add a grid to the wizard container and move the contents of the wizard to the grid, and apply the same CSS as on the first page.
Hi @mnikitina,
Yes, I have 4 html control of page breaker for this form. I had tried adjust the width, put into different container, create multiple page breaker name...but nothing can fix my print preview.
Here I attached of my form design setting:
This is my CSS Editor for my display form:
@media print
{
.ms-CommandBar, .ms-Nav, .ms-compositeHeader, div[class^="searchBox_"], .removeFocusOutline, .commandBarWrapper {
display:none !important;
}
}
.k-pdf-export .wizard-tab-container {
display: block !important;
}
.k-pdf-export .wizard-nav, .k-pdf-export .wizard-progress-bar, .k-pdf-export .wizard-header, .k-pdf-export .wizard-card-footer {
display: none !important;
}
.k-pdf-export .parent-grid {
width: 1080px !important;
}
.k-pdf-export .wizard {
width: 1080px !important;
}
And I added this to my JavaScript Editor:
fd.pdfOptions = {
forcePageBreak: ".breaker",
landscape: false
};
Below is the result:
What I had done wrong?
I think the grid width in this CSS breaks all page layout:
.k-pdf-export .parent-grid {
width: 1080px !important;
}
.k-pdf-export .wizard {
width: 1080px !important;
}
Please try either to remove it or set like this:
.k-pdf-export .parent-grid {
width: 100% !important;
}
.k-pdf-export .wizard {
width: 100% !important;
}
Hi @mnikitina, either way doesn't work! still same... if setting the width as 100% causing all pages not align accordingly.
Hi @mnikitina, I found the solution for my issue already. Instead of let the width as auto, I changed it to pixel and set as 1080.
