Question

我想在单个PDF文件中导出多个Kendo Grid。我有在PDF文件中导出2个网格的代码。但我想导出四个网格，我该如何实现。请帮忙！

$('#export').on('click', function()
{
    var grid1 = $('#innerGrid').data('kendoGrid');
    var grid2 = $('#developeesGrid').data('kendoGrid');
    var grid3 = $('#innerdeveloperGrid').data('kendoGrid');
    var grid4 = $('#innerVenueGrid').data('kendoGrid');

    var progress = $.Deferred();

    grid1._drawPDF(progress).then(function(firstGrid) 
    {
        grid2._drawPDF(progress).then(function(secondGrid)
        {
            secondGrid.children.forEach(function(x)
            {
                firstGrid.children.push(x);
            });

            return kendo.drawing.exportPDF(firstGrid, { multiPage: true });

        }).done(function(dataURI)
        {
            kendo.saveAs(
            {
                dataURI: dataURI,
                fileName: pdfFilesNames
            });
            progress.resolve();
        });           
    });
});

Answer 1

您将需要继续.then嵌套两个级别以用于其他网格。 .done方法被指定为最深的，以便执行导出。

  <p>Grid 1</p><div id="grid1"></div>
  <p>Grid 2</p><div id="grid2"></div>
  <p>Grid 3</p><div id="grid3"></div>
  <p>Grid 4</p><div id="grid4"></div>
  <p><button id="export">Export</button></p>
  <p id="log"></p>
  <script>
    data1 = [ {a:1,b:2,c:3}, {a:4,b:5,c:6}, {a:4,b:5,c:6} ];
    data2 = [ {x:1,y:2,z:3}, {x:4,y:5,z:6}, {x:4,y:5,z:6} ];
    data3 = [ {p:1,q:2,r:3}, {p:4,q:5,r:6}, {p:4,q:5,r:6} ];
    data4 = [ {f:1,g:2,h:3}, {f:4,g:5,h:6}, {f:4,g:5,h:6} ];

    $("#grid1").kendoGrid({dataSource:data1});
    $("#grid2").kendoGrid({dataSource:data2});
    $("#grid3").kendoGrid({dataSource:data3});
    $("#grid4").kendoGrid({dataSource:data4});

    $("#export").click(function(){

      var g1 = $("#grid1").getKendoGrid();
      var g2 = $("#grid2").getKendoGrid();
      var g3 = $("#grid3").getKendoGrid();
      var g4 = $("#grid4").getKendoGrid();

      var progress = $.Deferred();

      g1._drawPDF(progress).then
      (function(G1) {
        g2._drawPDF(progress).then
        (function(G2) {
          g3._drawPDF(progress).then
          (function(G3) {
            g4._drawPDF(progress).then
            (function(G4) {   
              G2.children.forEach(function(childOf2){G1.children.push(childOf2)});
              G3.children.forEach(function(childOf3){G1.children.push(childOf3)});
              G4.children.forEach(function(childOf4){G1.children.push(childOf4)});

              return kendo.drawing.exportPDF(G1, { multiPage: true });
            })
            .done(function(drawingExport) {
              debugger;
                    kendo.saveAs({
                    dataURI: drawingExport,
                    fileName: "fourgrid.pdf"
                    });
                    progress.resolve();
                })
          })
        })
      })
    });
  </script>

以PDF格式导出多个Kendo网格

1 个答案: