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的本地级别设置了分页符，但我需要更深入地浏览页面标题项以获取它起作用。

Answer 2

这是我正常工作的示例

第 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")
});

KendoUI forcePageBreak不显示长局部视图

2 个答案: