Inserting page breaks

[Josh]

Hello All,

   I have been working on an in house document editor.   However,  I am having when using PDF export getting page breaks to appear in the exported document.

I attempted creating both a custom button that would insert a <p STYLE='page-break-before: always'></p> and also just a custom formatting to use a similar style.  Neither appear to put page breaks into document when using pdf export.  Ideally, I would prefer to have it setup in  such a way that the page breaks were inserted automatically rather than manually.  Is there a way to set this up?

Additionally, I am curious about whether getting a custom footer setup for the bottom of each of these breaks is also a possibility.  However, first step is get something working for page breaks.

Thanks 

[Aleksandar]

Hi Josh,

The built-in PDF export functionality of the Editor relies on the Drawing library. The Drawing library supports multi page breaks. A page break occurs before each element that matches the forcePageBreak CSS selector of your choice. The option accepts CSS selectors that are passable to querySelector. In addition, the Editor in this mode (classic) uses an iframe with editable body as content area, which normally cannot be exported to PDF. This is why the Kendo Editor in Classic mode has its own mechanism to export to PDF

1. That said, to achieve the desired result I can suggest adding a class, that you can use as a query selector and a PdfExport event handler to customize the exported PDF:

Here is an updated REPL demonstrating the above.<script src="https://kendo.cdn.telerik.com/2017.3.913/js/pako_deflate.min.js"></script>
<script>
    function onPdfExport(e){
            e.preventDefault();
            var editor = e.sender;
            var tempContent = $("#tempContent");
            tempContent.html(editor.value());

            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            kendo.drawing.drawDOM(".content-wrapper", {
              forcePageBreak: ".new-page",
              paperSize: "A4",
              margin: "1cm"
            }).then(function(group){
              kendo.drawing.pdf.saveAs(group, "myPdfDocument.pdf");
            });

            tempContent.html("");
    }

</script>
 <div class="content-wrapper">
    <div id="tempContent"></div>
</div>

<div class="demo-section k-content wide editor">
    @(Html.Kendo().Editor()
            .Name("editor")
            .HtmlAttributes(new { style = "width: 100%; height:700px" })
            .StyleSheets(css => css
            .Add(Url.Content("~/shared/web/Editor/pdf-export-styles.css"))
            )
            .Pdf(pdf => pdf
                .Margin(20, 20, 20, 20)
                .PaperSize("A4")
                .ProxyURL(Url.Action("Pdf_Export_Save", "Editor"))
            )
            .Tools(tools => tools
                .Clear()
                .Pdf()
                .Print()
            )
            .Events(ev=>ev.PdfExport("onPdfExport"))
            .Value(@<text>
                <div>
                    Here is my first page
                </div>
                <div style="page-break-before: always" class="new-page">
                    Here is my second page
                </div>
                <div style="page-break-before: always" class="new-page">
                    Here is my third page
                </div>
        </text>)
    )
</div>

 

2. To customize the header and footer of the exported pdf file you can define a page template, that you can pass to the drawDOM method:

<script type="x/kendo-template" id="page-template">
    <div class="page-template" style="position:absolute; top:0; left:0; width:90%; height:100%">
        <div class="header" style="position:absolute; top:10px; left:5%; width:100%; font-size:18px; border-bottom: 1px solid black;">
            Header Text
        </div>
        <div class="footer" style="position:absolute; bottom:20px; right:10px; width:100%;">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
        </div>
    </div>
</script>

function onPdfExport(e){
            e.preventDefault();
            var editor = e.sender;
            var tempContent = $("#tempContent");
            tempContent.html(editor.value());

            // Convert the DOM element to a drawing using kendo.drawing.drawDOM
            kendo.drawing.drawDOM(".content-wrapper", {
              forcePageBreak: ".new-page",
              paperSize: "A4",
              margin: { left: "1cm", top: "2cm", right: "1cm", bottom: "2cm" },
              template: $("#page-template").html()
            }).then(function(group){
              kendo.drawing.pdf.saveAs(group, "test.pdf");
            });

            tempContent.html("");
    }

Here is a sample REPL demonstrating the above.

Regards,
Aleksandar
Progress Telerik