Kendo UI 在 .net 中导出为 PDF 多个页面答案

【问题标题】：Kendo UI export to PDF multiple pages in .netKendo UI 在 .net 中导出为 PDF 多个页面
【发布时间】：2018-02-12 09:28:35
【问题描述】：

我需要实现用于 pdf 导出的应用程序。当我搜索时，我发现剑道 UI 最适合我的要求。在我导出单页之前，它也很有效。

但是当我导出多个页面时，我的 kendo UI 代码无法正常工作。

在我的场景中，我的主 div 为“DivPrint”，其中有两个 A4 大小的 div。当我导出它时，它导出为 1 页而不是两页。

$scopeChild.generatePDF = function () {                                                


kendo.drawing.drawDOM($("#DivPrint"), {paperSize: "A4",multiPage: true                                             })
            .then(function (group) {                                                    
              kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
               })                                          
 }

【问题讨论】：

标签： jquery pdf kendo-ui telerik export

【解决方案1】：

function exportMultipleElements() {
    var exportSettings = {
        forcePageBreak: ".pageBreak",
        paperSize: "A3",
        landscape: true
    };
 
    var draw = kendo.drawing;
    var $ = $telerik.$;
    //use a few deferreds at once https://api.jquery.com/jquery.when/
    //https://docs.telerik.com/kendo-ui/api/javascript/drawing/methods/drawdom
    $.when(
        draw.drawDOM($("#first"), exportSettings),
        draw.drawDOM($("#second"), exportSettings),
        draw.drawDOM($("#third"), exportSettings),
        draw.drawDOM($("#fourth"), exportSettings)
    ).then(function (group1, group2, group3, group4) {//the number of arguments matches the number of deferreds
 
        var group = new kendo.drawing.Group({
            pdf: {
                multiPage: true
            }
        });
 
        //append the first three pages with the more static content, including the chart
        group.append(group1, group2, group3);
        //append the pages from the grid in the fourth element, see the rest of the functions in the full example to see how the page break selector is appended in the DOM
        group.append.apply(group, group4.children);
 
        return draw.exportPDF(group, exportSettings);
    }).done(function (data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "multi-element-export.pdf"
        });
    });
}

【讨论】：

【解决方案2】：

您可以使用 Kendo 和 html 中可用的 forcePageBreak 属性，您应该提及类。

你的 HTML 应该是这样的：

<div id="DivPrint">
 <div id="Div01">Text from first div </div>
 <div id="Div02" class="page-break">Text from second div</div>
<div>

而你的 JS 应该是这样的：

kendo.drawing.drawDOM("#DivPrint", {
    paperSize: "A4",
    forcePageBreak: ".page-break"
  })
  .then(function(group) {
    kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
  })

您可以在这里查看现场演示：https://jsbin.com/hedodigomu/

【讨论】：