KendoUI forcePageBreak不显示较长的分部视图

Question

我当前正在尝试为包含多个页面的web应用程序保存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");
        });       
}

​

我已经尝试在每个部分的开头放置分页符，但都没有用。我已经尝试过设置组，但我不太确定这是否能解决我的问题。和CSS的页面中断之前:总是不起作用。我不知道该怎么办。

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>

这很奇怪，因为我在调用partials的全局级别和调用main的本地级别设置了分页符，但我需要更深入地研究页眉项目才能使其正常工作。

Answer 2

下面是我正常工作的示例

第一步：所有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")
});