KendoUI forcePageBreak не отображает длинные частичные просмотры

В настоящее время я пытаюсь сохранить PDF-файл для веб-приложения со многими страницами. Я вызываю частичные представления на одну главную страницу и использую KendoUI для сохранения DOM в PDF. Поскольку некоторые из этих страниц очень длинные и меняются в зависимости от пользовательского ввода, мне нужно, чтобы данные отображались на нескольких страницах. Всякий раз, когда forcePageBreak не вызывается, KendoUI естественным образом делает это, отображая все данные на нескольких страницах. Хотя, когда я включаю forcePageBreak и устанавливаю разрывы страниц в начале каждого партиала на главной странице, каждый партиал будет отображать только одну страницу в pdf, а остальные данные обрезаются.

Вот пример кода главной страницы:

<div class="myCanvas" id="myCanvas">
    <div class="page-break">@{Html.RenderPartial("_Page1", Model._VM_Page1);}</div>
    <div class="page-break">@{Html.RenderPartial("_Page2", Model._VM_Page2);}</div>
    <div class="page-break">@{Html.RenderPartial("_Page3", Model._VM_Page3);}</div>
    <div class="page-break">@{Html.RenderPartial("_Page4", Model._VM_Page4);}</div>
    <div class="page-break">@{Html.RenderPartial("_Page5", Model._VM_Page5);}</div>
    <div class="page-break">@{Html.RenderPartial("_Page6", Model._VM_Page6);}</div>
</div>

<script>
function ExportPdf() {
    kendo.drawing
        .drawDOM("#myCanvas",
        {
            forcePageBreak: ".page-break",
            paperSize: "A4",
            margin: { top: "1cm", bottom: "1cm" },
            scale: 0.6,
            height: 500,
            multiPage: true
        })
        .then(function (group) {
            kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
        });       
}

I've tried putting page breaks within the beginning of each partial, to no avail. I've looked into trying to set groups, but I'm not exactly sure I understand if that will solve my problem. And CSS page-break-before: always isn't working. I'm unsure what to do.


kendo-ui kendo-ui-mvc
person J. Ha    schedule 06.04.2018    source источник
comment
Вы пытались настроить (или удалить) свойство масштаба?   -  person AussieJoe    schedule 07.04.2018
comment
К сожалению, перемещение свойства масштаба просто увеличивает все, но все равно обрезает данные.   -  person J. Ha    schedule 09.04.2018

Ответы (2)


arrow_upward
0
arrow_downward

Ответ, кажется, заключается в том, чтобы погрузиться глубже для самого низкого класса, который может иметь разрыв страницы раньше.

Обычно я решал эту проблему, помещая разрывы страниц в классы заголовков в каждом частичном представлении. Например:

function ExportPdf() {
    kendo.drawing
        .drawDOM("#myCanvas",
        {
            forcePageBreak: ".page-header",
            paperSize: "A4",
            margin: { top: "1cm", bottom: "1cm" },
            scale: 0.6,
            height: 500,
            multiPage: true
        })
        .then(function (group) {
            kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
        });       
}

Где логика моего кода будет похожа на:

<div class="main">
    <div class="page-header>
        Header
    </div>
    <div class="ContentContainer">
        Content
    </div>
</div>

Это было странно, потому что я установил разрывы страниц на глобальном уровне, где вызывались частичные, а также на локальном уровне, где вызывался основной, но мне нужно было еще глубже погрузиться в элементы заголовка страницы, чтобы заставить его работать. .

person J. Ha    schedule 09.04.2018

arrow_upward
0
arrow_downward

Вот мой пример работает правильно

Шаг 1. Все CDN

<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>

Шаг 2. Добавьте div к data div, которые вы создали

<div data-uid="#= uid #" class="#= (id%10 == 0 ? 'page-break' : '') #">
</div>

Шаг 3. Код JS

kendo.drawing.drawDOM("#downloadPDF", {
    paperSize: "A4",
    margin: {
        left: "1cm",
        top: "1cm",
        right: "1cm",
        bottom: "1cm"
    },
    scale: 0.8,
    forcePageBreak: ".page-break"
})
.then(function(group) {
    kendo.drawing.pdf.saveAs(group, "plagiarism.pdf")
});
person Azad Education    schedule 10.04.2021