Question

我需要为pdf导出实现app。当我搜索我的fount kendo UI最符合我的要求。在我导出单页之前，它也非常有效。

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

我的情景我主要有div作为'DivPrint'和两个A4大小的div。当我导出它的导出为1页而不是2页。

$scopeChild.generatePDF = function () {                                                


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

Answer 1

您可以使用Kendo和html内的family_id属性，您应该提及这些类。

您的HTML应该是这样的：

var id = data.changed.selected;

您的JS应该是这样的：

forcePageBreak

您可以在此处查看实时演示：https://jsbin.com/hedodigomu/

Answer 2

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

Kendo UI导出到.net中的PDF多页

2 个答案: