Exporting to PDF is coming out really wide

I have a simple form that adds the attachment images inline so that they appear for printing. The default PDF doesn't come out looking good at all. I added a button to use the

fd.exportToPDF(fd.field('Title').value);

which is a nice touch because it lets me set the name of the file as it is being exported AND it also includes all of the inline images. Please see attached:

2019-10-09 14_33_2 Marion Smith.pdf (36.4 KB)

As you will see in the attachment, the PDF is really wide, so when it is printed, the contents are scaled down to fit on a A4 page and become unreadable. There is something about my form that makes the PDF exporter think that it is really wide. What can I do to set the width of the form so that if fits nicely on a A4 page?

@smithme,

You need to specify the PDF file options, please use the following code:

fd.exportToPDF(fd.field('Title').value, {
    paperSize: 'A4',
    landscape: false,
    multiPage: true
});

Please find more information in the documentation here.

I did this that didn't help.

What I did that helped is I changed from a grid container to a table container, and now it is printing much better.

How do I address the:

kendo.drawing.drawDOM

Do I:

fd.drawDOM ?
fd.drawing.drawDOM ?

I have made good improvement but it still doesn't seem to format the additional pages. You can see how it looks right now in the attachment. Here is my code:

fd.toolbar.buttons.push({
    icon: 'Print',
    class: 'btn-outline-primary',
    text: 'Print',
    click: function() {
        var opts = {
            title     : 'Indian Creek Observation Log',
            paperSize : 'A4',
            landscape : false,
            multiPage : true,
            margin: {
                left      : '20mm',
                top       : '20mm',
                right     : '20mm',
                bottom    : '20mm'
            }
        }
        fd.exportToPDF(fd.field('Title').value, opts);
    }
});

2019-10-09 14_33_2 Marion Smith.pdf (26.0 KB)

@smithme,

Good improvement, PDF file looks nice.

PDF options applied to the whole PDF file, to each page.

Is the problem in the image? Do you want it to be displayed on a separate page?

You can add page breaks as described in this post:

There are several problems that I don't know what to do.

  1. There are actually two images (see attachment).
  2. I would like it to scale so the picture is cut off on the right margin, and then page break if the form is too long.
  3. I think I would like to scale the pictures so both of them are small enough to print the form on one page.

I think I fixed the image scaling by adding max-width: 100% to the css.

Now I just need to get the page break to work.

I added outside of the fd.spRendered but it did nothing.

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: true,
    multiPage: true
};

I added it inside of the fd.spRendered and still nothing.

As you can see in the click event of the Print button, I also added multiPage: true and it doesn't seem to do anything there either.

@smithme,

You can add a page break manually to the form.

Please add HTML control to the form where you want the page to have a break with the following code.
<div class='breaker'></div>

And add this property into exportToPDF- forcePageBreak: ".CSS_Class", like this:

fd.toolbar.buttons.push({
    icon: 'Print',
    class: 'btn-outline-primary',
    text: 'Print',
    click: function() {
        var opts = {
            title     : 'Indian Creek Observation Log',
            paperSize : 'A4',
			forcePageBreak: ".breaker",
            landscape : false,
            multiPage : true,
            margin: {
                left      : '20mm',
                top       : '20mm',
                right     : '20mm',
                bottom    : '20mm'
            }
        }
        fd.exportToPDF(fd.field('Title').value, opts);
    }
});