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
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
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.
Works great!
I looked in the Kendo API documentation, but didn’t get it working
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
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>