K-pdf-export forcePageBreak

Forms
1

Hello,

I try to use a class page-break in my form to get a multipage PDF. But can’t make it working …
How can it be done?

Thanks again!

Daniël

2

Dear Daniël,
If you want pages to break in general, you need to specify page type in JS pdfOptions, like this:

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

If you want to specify places where page break must occur, make sure to include this property into pdfOptions - forcePageBreak: ".CSS_Class", like this:

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

You can then add the following HTML control to add specific page breaks where you want them:
<div class='breaker'></div>

All this info is from Kendo API.

1 Like
3

Works great! :slight_smile:
I looked in the Kendo API documentation, but didn’t get it working :sweat:

I see that it’s possible to have a header and footer and tried find the right code by myself, but i do something wrong :tired_face:

Thanks again!!

My javascript:

fd.pdfOptions = {
    paperSize: 'A4',
    landscape: false,
	forcePageBreak: ".page-break",
	template: $("#page-template").html()
};

My CSS

    /*
        Make sure everything in the page template is absolutely positioned.
        All positions are relative to the page container.
    */
    .k-pdf-export .page-template > * {
        position: absolute;
        left: 20px;
        right: 20px;
        font-size: 90%;
    }
    .k-pdf-export .page-template .header {
        top: 20px;
        border-bottom: 1px solid #000;
    }
    .k-pdf-export .page-template .footer {
        bottom: 20px;
        border-top: 1px solid #000;
    }

HTML-control in form:

<script type="x/kendo-template" id="page-template">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page #:pageNum# of #:totalPages#</div>
                This is a header.
            </div>
            <div class="footer">
                This is a footer.
                Page #:pageNum# of #:totalPages#
            </div>
        </div>
 </script>