KendoUI forcePageBreak不显示长局部视图

Question

我目前正在尝试为包含许多页面的Web应用程序保存PDF。我将部分视图调用到一个主页面，并使用KendoUI将DOM保存到PDF中。因为这些页面中的一些非常长并且根据用户输入而变化，所以我需要在多个页面上显示数据。每当不调用forcePageBreak时，KendoUI自然会通过在多个页面上显示所有数据来实现此目的。虽然当我在主页面中的每个Partial的开头打开forcePageBreak并设置分页符时，每个Partial只会在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");
        });       
}

我已经尝试在每个部分的开头放置分页符，但没有用。我已经考虑过尝试设置群组，但我不确定我是否理解这是否能解决我的问题。而CSS page-break-before：总是不起作用。我不确定该怎么做。

Answer 1

答案似乎是深入研究可能有分页符的最低级别。

我通常通过在每个部分视图中的标题类上放置分页符来解决此问题。例如：

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>

这很奇怪，因为我在调用部分的全局级别设置了分页符，并且在调用main的本地级别设置了分页符，但是我需要更深入地浏览页面标题项以使其工作。