K-pdf-export: Full page image on first page

Forms SharePoint Online
1

Hello,

How can I place a full-page image on the first page only?
Looked everywhere for a solution but no luck ...

Thanks,

Daniël

2

Hello @danieljr,

You can add an 'Image' control to the form and specify the desired size. Then add the CSS class to the control.

image

To hide the image on the form and show it in PDF only, please use this CSS in CSS Editor:

.image {
display: none;
}

.k-pdf-export .image {
display: block !important;
}

To be sure that the image only is on the first page, you can add a Page Break after the 'Image' control. For this add 'HTML' control and add the following code to it.

<div class='breaker'></div>

image

Then add the following code to JavaScript Editor. Also, in this code, you can specify the page size and landscape of the PDF document.

fd.pdfOptions = {
    forcePageBreak: ".breaker",
    paperSize: 'A4',
    landscape: true
};
3

That worked fine :grinning:

I try now to move it to the upper left corner but can’t get further then the margin. Can I adjust the margin only for the first page?

Also i like to have the image fullpage. What is the best way? Search the correct width en height in px or ???

Thank you

Daniël

4

@danieljr,

Please do the following to adjust a picture to be a full page.

  1. Add the CSS class to the image and parent grid.
    image

  2. We will remove the margins from the entire PDF, but the content should be indented from the borders. To do this, add the “Grid” container to the form, add the CSS class to it and place in it all the fields and controls except the image.
    image
    image

  3. Paste the following styling in CSS Editor.

/* hiding grid with the image in the browser */
.imagebox {
display: none;
}
/* showing a grid with the image in the browser */
.k-pdf-export .imagebox {
display: block !important;
}

/* sizing picture to fit the PDF page */
.k-pdf-export .image{
width: 842px !important;
height: 595px !important;
}
/* removing margins in PDF */
.k-pdf-export .fd-form .container-fluid {
    padding-left: 0px;
	padding-top: 0px;
}

/* adding padding to the grid with the content */
.k-pdf-export .box {
    padding-left: 50px !important;
    padding-top: 50px !important;
}

Paper size and landscape type are specified in the script:

fd.pdfOptions = {
    forcePageBreak: ".breaker",
    paperSize: 'A4',
    landscape: true
};

For paper size 'A4' and landscape: true the image size will be: width 842px height 595px.

For paper size 'A4' and landscape: false the image size will be: width 595px height 842px.

5

Hello Nikitina,

This works fine, but can I set a margin on the bottom of the page? (only for the text in the "box")

Thank you,

Daniël

6

Hello @danieljr,

You can set the button margin of the grid using the following CSS:


.k-pdf-export .box {
    margin-bottom: 50px !important;
}
1 Like